inspector-ng 0.0.6 → 0.0.9

package/fesm2022/inspector-ng.mjs

@@ -1,12 +1,332 @@
 import * as i0 from '@angular/core';
-import { viewChild, signal, computed, effect, PLATFORM_ID, HostListener, Input, Inject, 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';
+import * as i1 from '@ngrx/store';
+import { Store, META_REDUCERS } from '@ngrx/store';
+import { firstValueFrom, take } from 'rxjs';
 
 const inspector_STORAGE_KEY = "inspector-state";
-const inspector_STATE_VERSION = 1;
+const inspector_STATE_VERSION = 2;
 const GUIDE_SNAP_DISTANCE = 10;
 const GUIDE_HITBOX_SIZE = 14;
 
+const RESTORE_CHECKPOINT = '[Inspector Checkpoints] Restore';
+const DATABASE_NAME = 'inspector-ng';
+const DATABASE_VERSION = 1;
+const STORE_NAME = 'checkpoints';
+const INSPECTOR_CHECKPOINT_REPOSITORY = new InjectionToken('INSPECTOR_CHECKPOINT_REPOSITORY');
+function inspectorCheckpointMetaReducer(reducer) {
+    return (state, action) => {
+        if (action.type === RESTORE_CHECKPOINT) {
+            return action.state;
+        }
+        return reducer(state, action);
+    };
+}
+class InspectorCheckpointRepository {
+}
+class IndexedDbCheckpointRepository extends InspectorCheckpointRepository {
+    constructor(platformId) {
+        super();
+        this.platformId = platformId;
+        this.databasePromise = null;
+    }
+    async list() {
+        const database = await this.database();
+        const values = await this.request(database.transaction(STORE_NAME, 'readonly').objectStore(STORE_NAME).getAll());
+        return values
+            .filter(isCheckpointRecord)
+            .sort(newestFirst$1);
+    }
+    async put(checkpoint) {
+        const database = await this.database();
+        await this.transactionComplete(database, 'readwrite', (store) => store.put(checkpoint));
+    }
+    async delete(id) {
+        const database = await this.database();
+        await this.transactionComplete(database, 'readwrite', (store) => store.delete(id));
+    }
+    database() {
+        if (!isPlatformBrowser(this.platformId) || typeof indexedDB === 'undefined') {
+            return Promise.reject(new Error('Checkpoints are only available in a browser with IndexedDB.'));
+        }
+        if (this.databasePromise)
+            return this.databasePromise;
+        this.databasePromise = new Promise((resolve, reject) => {
+            const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
+            request.onupgradeneeded = () => {
+                const database = request.result;
+                if (database.objectStoreNames.contains(STORE_NAME))
+                    return;
+                const store = database.createObjectStore(STORE_NAME, { keyPath: 'id' });
+                store.createIndex('createdAt', 'createdAt');
+            };
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = () => reject(request.error ?? new Error('IndexedDB could not be opened.'));
+            request.onblocked = () => reject(new Error('IndexedDB is blocked by another open tab.'));
+        });
+        return this.databasePromise;
+    }
+    request(request) {
+        return new Promise((resolve, reject) => {
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = () => reject(request.error ?? new Error('IndexedDB request failed.'));
+        });
+    }
+    transactionComplete(database, mode, operation) {
+        return new Promise((resolve, reject) => {
+            const transaction = database.transaction(STORE_NAME, mode);
+            transaction.oncomplete = () => resolve();
+            transaction.onerror = () => reject(transaction.error ?? new Error('IndexedDB transaction failed.'));
+            transaction.onabort = () => reject(transaction.error ?? new Error('IndexedDB transaction was aborted.'));
+            operation(transaction.objectStore(STORE_NAME));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IndexedDbCheckpointRepository, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IndexedDbCheckpointRepository }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IndexedDbCheckpointRepository, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+class InspectorCheckpointService {
+    constructor(repository, store, router, platformId) {
+        this.repository = repository;
+        this.store = store;
+        this.router = router;
+        this.platformId = platformId;
+        this.checkpoints = signal([]);
+        this.loading = signal(false);
+        this.busy = signal(false);
+        this.error = signal(null);
+    }
+    async load() {
+        this.error.set(null);
+        this.loading.set(true);
+        try {
+            this.checkpoints.set((await this.repository.list()).sort(newestFirst$1));
+        }
+        catch (error) {
+            this.error.set(this.messageFor(error, 'Saved checkpoints could not be loaded. Try reloading the page.'));
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async save() {
+        this.error.set(null);
+        if (!this.store) {
+            this.error.set(this.missingStoreMessage());
+            return null;
+        }
+        this.busy.set(true);
+        try {
+            const currentState = await firstValueFrom(this.store.pipe(take(1)));
+            const state = cloneJson(currentState);
+            const persisted = await this.repository.list();
+            const route = this.currentRoute();
+            const pathname = this.currentPathname();
+            const checkpoint = {
+                version: 1,
+                id: createCheckpointId(),
+                name: nextAutomaticName(pathname, persisted.map(({ name }) => name)),
+                route,
+                createdAt: new Date().toISOString(),
+                state,
+            };
+            await this.repository.put(checkpoint);
+            this.checkpoints.set([checkpoint, ...persisted].sort(newestFirst$1));
+            return checkpoint;
+        }
+        catch (error) {
+            this.error.set(this.storageMessage(error, 'The checkpoint could not be saved.'));
+            return null;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async restore(id) {
+        this.error.set(null);
+        if (!this.store) {
+            this.error.set(this.missingStoreMessage());
+            return false;
+        }
+        this.busy.set(true);
+        try {
+            const checkpoint = (await this.repository.list()).find((item) => item.id === id);
+            if (!checkpoint)
+                throw new Error('Checkpoint not found. It may have been deleted in another tab.');
+            const state = cloneJson(checkpoint.state, `“${checkpoint.name}” could not be decoded. Delete it and save a new checkpoint.`);
+            this.store.dispatch({ type: RESTORE_CHECKPOINT, state });
+            if (this.router && !await this.router.navigateByUrl(checkpoint.route)) {
+                throw new Error(`The state was restored, but navigation to “${checkpoint.route}” was cancelled.`);
+            }
+            return true;
+        }
+        catch (error) {
+            this.error.set(this.messageFor(error, 'The checkpoint could not be restored. Delete it and save a new one.'));
+            return false;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async rename(id, name) {
+        this.error.set(null);
+        const nextName = name.trim();
+        if (!nextName) {
+            this.error.set('Please enter a checkpoint name.');
+            return false;
+        }
+        this.busy.set(true);
+        try {
+            const checkpoints = await this.repository.list();
+            if (checkpoints.some((item) => item.id !== id && item.name.toLocaleLowerCase() === nextName.toLocaleLowerCase())) {
+                throw new Error(`A checkpoint named “${nextName}” already exists. Choose a different name.`);
+            }
+            const checkpoint = checkpoints.find((item) => item.id === id);
+            if (!checkpoint)
+                throw new Error('Checkpoint not found. It may have been deleted in another tab.');
+            await this.repository.put({ ...checkpoint, name: nextName });
+            this.checkpoints.set(checkpoints.map((item) => item.id === id ? { ...item, name: nextName } : item).sort(newestFirst$1));
+            return true;
+        }
+        catch (error) {
+            this.error.set(this.storageMessage(error, 'The checkpoint could not be renamed.'));
+            return false;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async delete(id) {
+        this.error.set(null);
+        this.busy.set(true);
+        try {
+            await this.repository.delete(id);
+            this.checkpoints.set(this.checkpoints().filter((item) => item.id !== id));
+            return true;
+        }
+        catch (error) {
+            this.error.set(this.storageMessage(error, 'The checkpoint could not be deleted.'));
+            return false;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    clearError() {
+        this.error.set(null);
+    }
+    currentRoute() {
+        if (!isPlatformBrowser(this.platformId))
+            return '/';
+        return `${this.currentPathname()}${window.location.search}${window.location.hash}`;
+    }
+    currentPathname() {
+        if (!isPlatformBrowser(this.platformId))
+            return '/';
+        return window.location.pathname || '/';
+    }
+    missingStoreMessage() {
+        return 'The NgRx root store is unavailable. Check that provideInspectorCheckpoints() is registered after provideStore().';
+    }
+    storageMessage(error, fallback) {
+        if (isQuotaError(error)) {
+            return 'Browser storage is full. Delete old checkpoints, then try saving again.';
+        }
+        return this.messageFor(error, fallback);
+    }
+    messageFor(error, fallback) {
+        return error instanceof Error && error.message ? error.message : fallback;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorCheckpointService, deps: [{ token: INSPECTOR_CHECKPOINT_REPOSITORY }, { token: Store, optional: true }, { token: Router, optional: true }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorCheckpointService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorCheckpointService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: InspectorCheckpointRepository, decorators: [{
+                    type: Inject,
+                    args: [INSPECTOR_CHECKPOINT_REPOSITORY]
+                }] }, { type: i1.Store, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [Store]
+                }] }, { type: i2.Router, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+function provideInspectorCheckpoints() {
+    return makeEnvironmentProviders([
+        IndexedDbCheckpointRepository,
+        {
+            provide: INSPECTOR_CHECKPOINT_REPOSITORY,
+            useExisting: IndexedDbCheckpointRepository,
+        },
+        InspectorCheckpointService,
+        {
+            provide: META_REDUCERS,
+            multi: true,
+            useValue: inspectorCheckpointMetaReducer,
+        },
+    ]);
+}
+function nextAutomaticName(route, names) {
+    const used = new Set(names.map((name) => name.toLocaleLowerCase()));
+    if (!used.has(route.toLocaleLowerCase()))
+        return route;
+    for (let suffix = 2;; suffix += 1) {
+        const candidate = `${route} ${suffix}`;
+        if (!used.has(candidate.toLocaleLowerCase()))
+            return candidate;
+    }
+}
+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);
+        if (serialized === undefined)
+            throw new Error();
+        return JSON.parse(serialized);
+    }
+    catch {
+        throw new Error(failureMessage);
+    }
+}
+function createCheckpointId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `checkpoint-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function isQuotaError(error) {
+    return error instanceof DOMException && (error.name === 'QuotaExceededError' || error.name === 'NS_ERROR_DOM_QUOTA_REACHED');
+}
+function newestFirst$1(a, b) {
+    return b.createdAt.localeCompare(a.createdAt) || b.id.localeCompare(a.id);
+}
+function isCheckpointRecord(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const checkpoint = value;
+    return checkpoint.version === 1 &&
+        typeof checkpoint.id === 'string' &&
+        typeof checkpoint.name === 'string' &&
+        typeof checkpoint.route === 'string' &&
+        typeof checkpoint.createdAt === 'string' &&
+        'state' in checkpoint;
+}
+
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 const getViewportSize = () => ({
     width: typeof window === 'undefined' ? 1 : window.innerWidth || 1,
@@ -267,6 +587,56 @@ const getTargetElement = (point, overlayElement) => {
     return document.elementFromPoint(point.x, point.y);
 };
 
+function fuzzyCheckpoints(checkpoints, query) {
+    const normalizedQuery = normalize(query.trim());
+    if (!normalizedQuery)
+        return [...checkpoints].sort(newestFirst);
+    return checkpoints
+        .map((checkpoint) => {
+        const score = fuzzyScore(checkpoint.name, normalizedQuery);
+        return score === null ? null : { checkpoint, score };
+    })
+        .filter((item) => item !== null)
+        .sort((a, b) => b.score - a.score || newestFirst(a.checkpoint, b.checkpoint))
+        .map(({ checkpoint }) => checkpoint);
+}
+function fuzzyScore(value, normalizedQuery) {
+    const candidate = normalize(value);
+    if (candidate === normalizedQuery)
+        return 10_000;
+    if (candidate.startsWith(normalizedQuery))
+        return 8_000 - candidate.length;
+    const substringIndex = candidate.indexOf(normalizedQuery);
+    if (substringIndex >= 0)
+        return 6_000 - substringIndex * 10 - candidate.length;
+    let queryIndex = 0;
+    let firstIndex = -1;
+    let lastIndex = -1;
+    let gapPenalty = 0;
+    for (let index = 0; index < candidate.length && queryIndex < normalizedQuery.length; index += 1) {
+        if (candidate[index] !== normalizedQuery[queryIndex])
+            continue;
+        if (firstIndex < 0)
+            firstIndex = index;
+        if (lastIndex >= 0)
+            gapPenalty += index - lastIndex - 1;
+        lastIndex = index;
+        queryIndex += 1;
+    }
+    if (queryIndex !== normalizedQuery.length)
+        return null;
+    return 4_000 - firstIndex * 10 - gapPenalty * 20 - candidate.length;
+}
+function normalize(value) {
+    return value
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLocaleLowerCase();
+}
+function newestFirst(a, b) {
+    return b.createdAt.localeCompare(a.createdAt) || b.id.localeCompare(a.id);
+}
+
 const createId = () => typeof crypto !== 'undefined' && 'randomUUID' in crypto
     ? crypto.randomUUID()
     : `${Date.now()}-${Math.random()}`;
@@ -278,22 +648,33 @@ class inspectorComponent {
         this.formatValue = formatValue;
         this.guideHitboxSize = GUIDE_HITBOX_SIZE;
         this.overlayRoot = viewChild('overlayRoot');
+        this.checkpointDialog = viewChild('checkpointDialog');
+        this.checkpointSearch = viewChild('checkpointSearch');
         this.highlightColor = '#4f8cff';
         this.guideColor = '#ff7a00';
         this.hoverHighlightEnabled = true;
         this.persistOnReload = false;
-        this.enabled = signal(false);
+        this.checkpointService = inject(InspectorCheckpointService, { optional: true });
+        this.commandBarOpen = signal(false);
+        this.checkpointQuery = signal('');
+        this.activeCheckpointIndex = signal(0);
+        this.editingCheckpointId = signal(null);
+        this.deletingCheckpointId = signal(null);
+        this.renameDraft = signal('');
+        this.checkpointToast = signal(null);
+        this.checkpointToastIsError = signal(false);
+        this.filteredCheckpoints = computed(() => fuzzyCheckpoints(this.checkpointService?.checkpoints() ?? [], this.checkpointQuery()));
+        this.enabled = signal(true);
         this.toolMode = signal('none');
         this.guideOrientation = signal('vertical');
         this.guides = signal([]);
         this.hoverRect = signal(null);
         this.selectedGuideId = signal(null);
         this.selectedMeasurement = signal(null);
-        this.showTypography = signal(true);
+        this.showTypography = signal(false);
         this.altPressed = signal(false);
         this.distanceOverlay = signal(null);
         this.textBlocks = signal([]);
-        this.guideMenuOpen = signal(false);
         this.guidePreview = signal(null);
         this.selectedMetaLine = computed(() => {
             const selected = this.selectedMeasurement();
@@ -318,6 +699,7 @@ class inspectorComponent {
         this.draggingGuideId = null;
         this.selectedElement = null;
         this.hoverElement = null;
+        this.toastTimer = null;
         this.canUndo = computed(() => this.historyIndex() > 0);
         this.canRedo = computed(() => this.historyIndex() >= 0 &&
             this.historyIndex() < this.history().length - 1);
@@ -359,12 +741,12 @@ class inspectorComponent {
         }
         try {
             const parsed = JSON.parse(stored);
-            if (parsed.version === inspector_STATE_VERSION) {
-                this.enabled.set(parsed.enabled);
+            if (parsed.version === inspector_STATE_VERSION || parsed.version === 1) {
+                this.enabled.set(true);
                 this.toolMode.set(parsed.toolMode);
                 this.guideOrientation.set(parsed.guideOrientation);
                 this.guides.set(parsed.guides ?? []);
-                this.showTypography.set(parsed.showTypography ?? true);
+                this.showTypography.set(parsed.version === 1 ? false : (parsed.showTypography ?? false));
                 this.recordHistory(parsed.guides ?? []);
             }
         }
@@ -381,6 +763,8 @@ class inspectorComponent {
         window.removeEventListener('click', this.handleCapturedClick, {
             capture: true,
         });
+        if (this.toastTimer)
+            clearTimeout(this.toastTimer);
     }
     setToolMode(mode) {
         if (!this.enabled()) {
@@ -396,12 +780,125 @@ class inspectorComponent {
         this.guideOrientation.set(orientation);
         this.guidePreview.set(null);
     }
+    activateGuideOrientation(orientation) {
+        const isActive = this.toolMode() === 'guides' && this.guideOrientation() === orientation;
+        this.setGuideOrientation(orientation);
+        if (isActive || this.toolMode() !== 'guides') {
+            this.setToolMode('guides');
+        }
+    }
     toggleTypography() {
         this.showTypography.update((value) => !value);
         this.refreshTypographyBlocks();
     }
-    toggleGuideMenu() {
-        this.guideMenuOpen.update((value) => !value);
+    disableInspector() {
+        this.setInspectorEnabled(false);
+    }
+    async saveCheckpoint() {
+        const checkpoint = await this.checkpointService?.save();
+        if (checkpoint) {
+            this.showCheckpointToast(`Saved “${checkpoint.name}”.`);
+        }
+        else if (this.checkpointService?.error()) {
+            this.showCheckpointToast(this.checkpointService.error(), true);
+        }
+    }
+    async openCheckpointCommandBar() {
+        if (!this.checkpointService || !this.isBrowser || this.commandBarOpen())
+            return;
+        this.commandBarOpen.set(true);
+        this.checkpointQuery.set('');
+        this.activeCheckpointIndex.set(0);
+        this.editingCheckpointId.set(null);
+        this.deletingCheckpointId.set(null);
+        this.checkpointService.clearError();
+        this.checkpointDialog()?.nativeElement.showModal();
+        queueMicrotask(() => this.checkpointSearch()?.nativeElement.focus());
+        await this.checkpointService.load();
+        this.clampActiveCheckpoint();
+    }
+    closeCheckpointCommandBar() {
+        if (this.checkpointService?.busy())
+            return;
+        this.checkpointDialog()?.nativeElement.close();
+        this.commandBarOpen.set(false);
+        this.editingCheckpointId.set(null);
+        this.deletingCheckpointId.set(null);
+    }
+    updateCheckpointQuery(event) {
+        this.checkpointQuery.set(event.target.value);
+        this.activeCheckpointIndex.set(0);
+        this.editingCheckpointId.set(null);
+        this.deletingCheckpointId.set(null);
+        this.checkpointService?.clearError();
+    }
+    setActiveCheckpoint(index) {
+        this.activeCheckpointIndex.set(index);
+    }
+    async restoreCheckpoint(checkpoint) {
+        if (!this.checkpointService || this.checkpointService.busy())
+            return;
+        const restored = await this.checkpointService.restore(checkpoint.id);
+        if (!restored)
+            return;
+        this.checkpointDialog()?.nativeElement.close();
+        this.commandBarOpen.set(false);
+        this.showCheckpointToast(`Restored “${checkpoint.name}”.`);
+    }
+    beginRename(checkpoint, event) {
+        event?.stopPropagation();
+        if (this.checkpointService?.busy())
+            return;
+        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);
+        this.checkpointService?.clearError();
+    }
+    async finishRename(checkpoint) {
+        if (await this.checkpointService?.rename(checkpoint.id, this.renameDraft())) {
+            this.editingCheckpointId.set(null);
+            this.checkpointSearch()?.nativeElement.focus();
+        }
+    }
+    cancelRename() {
+        this.editingCheckpointId.set(null);
+        this.checkpointService?.clearError();
+        this.checkpointSearch()?.nativeElement.focus();
+    }
+    beginDelete(checkpoint, event) {
+        event?.stopPropagation();
+        if (this.checkpointService?.busy())
+            return;
+        this.deletingCheckpointId.set(checkpoint.id);
+        this.editingCheckpointId.set(null);
+    }
+    cancelDelete(event) {
+        event?.stopPropagation();
+        this.deletingCheckpointId.set(null);
+        this.checkpointSearch()?.nativeElement.focus();
+    }
+    async confirmDelete(checkpoint, event) {
+        event?.stopPropagation();
+        if (!await this.checkpointService?.delete(checkpoint.id))
+            return;
+        this.deletingCheckpointId.set(null);
+        this.clampActiveCheckpoint();
+        this.checkpointSearch()?.nativeElement.focus();
+    }
+    handleCheckpointDialogClick(event) {
+        if (event.target === this.checkpointDialog()?.nativeElement &&
+            !this.checkpointService?.busy() &&
+            !this.deletingCheckpointId()) {
+            this.closeCheckpointCommandBar();
+        }
     }
     clearGuides() {
         this.guides.set([]);
@@ -422,18 +919,27 @@ class inspectorComponent {
     }
     handleKeydown(event) {
         const key = event.key.toLowerCase();
-        if (key === 'm') {
+        if (this.checkpointService &&
+            !event.repeat &&
+            (event.metaKey || event.ctrlKey) &&
+            event.shiftKey &&
+            key === 'p') {
             event.preventDefault();
-            this.enabled.update((value) => !value);
-            if (!this.enabled()) {
-                this.toolMode.set('none');
-                this.hoverRect.set(null);
-                this.selectedGuideId.set(null);
-                this.distanceOverlay.set(null);
-                this.textBlocks.set([]);
-                this.guidePreview.set(null);
+            this.commandBarOpen() ? this.closeCheckpointCommandBar() : void this.openCheckpointCommandBar();
+            return;
+        }
+        if (this.commandBarOpen()) {
+            this.handleCommandBarKeydown(event, key);
+            return;
+        }
+        if (key === 'm') {
+            const target = event.target;
+            if (target?.matches('input, textarea, select') ||
+                target?.isContentEditable) {
+                return;
             }
-            this.refreshTypographyBlocks();
+            event.preventDefault();
+            this.setInspectorEnabled(!this.enabled());
             return;
         }
         if (!this.enabled()) {
@@ -588,6 +1094,94 @@ class inspectorComponent {
         const overlay = this.overlayRoot()?.nativeElement ?? null;
         return !(overlay && overlay.contains(event.target));
     }
+    setInspectorEnabled(enabled) {
+        this.enabled.set(enabled);
+        if (!enabled) {
+            this.toolMode.set('none');
+            this.hoverRect.set(null);
+            this.selectedGuideId.set(null);
+            this.selectedMeasurement.set(null);
+            this.distanceOverlay.set(null);
+            this.textBlocks.set([]);
+            this.guidePreview.set(null);
+            this.altPressed.set(false);
+            this.selectedElement = null;
+            this.hoverElement = null;
+            this.draggingGuideId = null;
+        }
+        this.refreshTypographyBlocks();
+    }
+    handleCommandBarKeydown(event, key) {
+        const checkpoints = this.filteredCheckpoints();
+        const active = checkpoints[this.activeCheckpointIndex()];
+        const target = event.target;
+        const isRenameInput = target?.classList?.contains('inspector-command-row__rename') ?? false;
+        if (key === 'escape') {
+            event.preventDefault();
+            if (this.editingCheckpointId())
+                this.cancelRename();
+            else if (this.deletingCheckpointId())
+                this.cancelDelete();
+            else
+                this.closeCheckpointCommandBar();
+            return;
+        }
+        if (this.checkpointService?.busy())
+            return;
+        const editingCheckpoint = checkpoints.find(({ id }) => id === this.editingCheckpointId());
+        if (isRenameInput && key === 'enter' && editingCheckpoint) {
+            event.preventDefault();
+            void this.finishRename(editingCheckpoint);
+            return;
+        }
+        if (isRenameInput)
+            return;
+        if (key === 'arrowdown') {
+            event.preventDefault();
+            this.activeCheckpointIndex.set(Math.min(this.activeCheckpointIndex() + 1, Math.max(0, checkpoints.length - 1)));
+            this.scrollActiveCheckpointIntoView();
+            return;
+        }
+        if (key === 'arrowup') {
+            event.preventDefault();
+            this.activeCheckpointIndex.set(Math.max(0, this.activeCheckpointIndex() - 1));
+            this.scrollActiveCheckpointIntoView();
+            return;
+        }
+        if (key === 'enter' && active && !this.deletingCheckpointId()) {
+            event.preventDefault();
+            void this.restoreCheckpoint(active);
+            return;
+        }
+        if (key === 'f2' && active) {
+            event.preventDefault();
+            this.beginRename(active);
+            return;
+        }
+        if (key === 'delete' && active) {
+            event.preventDefault();
+            this.beginDelete(active);
+        }
+    }
+    clampActiveCheckpoint() {
+        this.activeCheckpointIndex.set(Math.min(this.activeCheckpointIndex(), Math.max(0, this.filteredCheckpoints().length - 1)));
+    }
+    scrollActiveCheckpointIntoView() {
+        queueMicrotask(() => {
+            const row = this.checkpointDialog()?.nativeElement.querySelector(`[data-checkpoint-index="${this.activeCheckpointIndex()}"]`);
+            row?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    showCheckpointToast(message, isError = false) {
+        if (this.toastTimer)
+            clearTimeout(this.toastTimer);
+        this.checkpointToastIsError.set(isError);
+        this.checkpointToast.set(message);
+        this.toastTimer = setTimeout(() => {
+            this.checkpointToast.set(null);
+            this.checkpointToastIsError.set(false);
+        }, 2500);
+    }
     selectElementAtPoint(event) {
         const overlay = this.overlayRoot()?.nativeElement ?? null;
         const target = getTargetElement({ x: event.clientX, y: event.clientY }, overlay);
@@ -732,11 +1326,11 @@ class inspectorComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: inspectorComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: inspectorComponent, isStandalone: true, selector: "inspector-overlay", inputs: { highlightColor: "highlightColor", guideColor: "guideColor", hoverHighlightEnabled: "hoverHighlightEnabled", persistOnReload: "persistOnReload" }, host: { listeners: { "window:keydown": "handleKeydown($event)", "window:keyup": "handleKeyup($event)", "window:pointermove": "handlePointerMove($event)", "window:pointerup": "handlePointerUp()", "window:click": "handleClick($event)", "window:resize": "handleViewportChange()", "window:scroll": "handleViewportChange()" } }, viewQueries: [{ propertyName: "overlayRoot", first: true, predicate: ["overlayRoot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  <div class=\"inspector-toolbar\">\n    <div class=\"inspector-toolbar__rail\">\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"toolMode() === 'select'\"\n        (click)=\"setToolMode('select')\"\n        title=\"Select mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"showTypography()\"\n        (click)=\"toggleTypography()\"\n        title=\"Typography mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n        </svg>\n      </button>\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--guide-main\"\n          [class.is-active]=\"toolMode() === 'guides'\"\n          (click)=\"setToolMode('guides')\"\n          title=\"Guides mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 2h1v12H4zM11 2h1v12h-1zM2 4h12v1H2zM2 11h12v1H2z\" />\n          </svg>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--ghost inspector-icon-button--guide-menu\"\n          [class.is-active]=\"guideMenuOpen()\"\n          (click)=\"toggleGuideMenu()\"\n          title=\"Guide options\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4.47 6.97L8 10.5l3.53-3.53-.94-.94L8 8.62 5.41 6.03z\" />\n          </svg>\n        </button>\n\n        @if (guideMenuOpen()) {\n          <div class=\"inspector-guide-menu\">\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'vertical'\"\n              (click)=\"setGuideOrientation('vertical')\"\n            >\n              Vertical\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'horizontal'\"\n              (click)=\"setGuideOrientation('horizontal')\"\n            >\n              Horizontal\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment inspector-segment--danger\"\n              (click)=\"clearGuides()\"\n            >\n              Clear\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:18px;right:18px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__rail{align-items:center}.inspector-guide-group{position:relative;display:flex;gap:0;align-items:center;border-radius:6px}.inspector-guide-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:max-content;flex-direction:column;align-items:stretch}.inspector-guide-menu .inspector-segment{justify-content:flex-start;width:100%}.inspector-icon-button,.inspector-segment{display:inline-flex;align-items:center;justify-content:center;height:26px;border:0;border-radius:6px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .12s ease,color .12s ease;font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{width:26px}.inspector-icon-button svg{width:14px;height:14px;fill:currentColor}.inspector-icon-button:hover,.inspector-segment:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active,.inspector-segment.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--ghost.is-active{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button--guide-main{border-radius:6px 0 0 6px}.inspector-icon-button--guide-menu{width:20px;border-radius:0 6px 6px 0}.inspector-icon-button--guide-menu svg{width:12px;height:12px}.inspector-segment{padding:0 8px;white-space:nowrap}.inspector-segment--danger:hover{background:#ef444429;color:#fecaca}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: inspectorComponent, isStandalone: true, selector: "inspector-overlay", inputs: { highlightColor: "highlightColor", guideColor: "guideColor", hoverHighlightEnabled: "hoverHighlightEnabled", persistOnReload: "persistOnReload" }, host: { listeners: { "window:keydown": "handleKeydown($event)", "window:keyup": "handleKeyup($event)", "window:pointermove": "handlePointerMove($event)", "window:pointerup": "handlePointerUp()", "window:click": "handleClick($event)", "window:resize": "handleViewportChange()", "window:scroll": "handleViewportChange()" } }, viewQueries: [{ propertyName: "overlayRoot", first: true, predicate: ["overlayRoot"], descendants: true, isSignal: true }, { 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 (enabled()) {\n    <div class=\"inspector-toolbar\">\n      <div class=\"inspector-toolbar__rail\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button\"\n          [class.is-active]=\"toolMode() === 'select'\"\n          (click)=\"setToolMode('select')\"\n          aria-label=\"Select mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Select</span>\n        </button>\n\n        @if (checkpointService) {\n          <button\n            type=\"button\"\n            class=\"inspector-icon-button\"\n            (click)=\"saveCheckpoint()\"\n            [disabled]=\"checkpointService.busy()\"\n            aria-label=\"Save checkpoint\"\n          >\n            <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n              <path d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\" />\n            </svg>\n            <span class=\"inspector-tooltip\" role=\"tooltip\">Save checkpoint</span>\n          </button>\n        }\n\n        <div class=\"inspector-toolbar__secondary\">\n          <div class=\"inspector-toolbar__reveal\">\n            <div class=\"inspector-toolbar__reveal-inner\">\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"showTypography()\"\n                (click)=\"toggleTypography()\"\n                aria-label=\"Typography overlay\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Typography</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'vertical'\"\n                (click)=\"activateGuideOrientation('vertical')\"\n                aria-label=\"Vertical guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Vertical guides</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'horizontal'\"\n                (click)=\"activateGuideOrientation('horizontal')\"\n                aria-label=\"Horizontal guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M2 7.25h12v1.5H2z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Horizontal guides</span>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <span class=\"inspector-toolbar__divider\" aria-hidden=\"true\"></span>\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--power\"\n          (click)=\"disableInspector()\"\n          aria-label=\"Disable inspector; press M to enable\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M7.25 1.5h1.5v6h-1.5zM4.1 3.35l.96 1.15A4.25 4.25 0 1 0 10.94 4.5l.96-1.15A5.75 5.75 0 1 1 4.1 3.35z\" />\n          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Disable</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (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 id=\"inspector-command-title\" class=\"inspector-visually-hidden\" for=\"inspector-checkpoint-search\">\n            Search checkpoints\n          </label>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"Find a checkpoint\u2026\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results'\"\n            [attr.aria-activedescendant]=\"filteredCheckpoints().length ? 'inspector-checkpoint-' + filteredCheckpoints()[activeCheckpointIndex()].id : null\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p class=\"inspector-command__message inspector-command__message--error\" role=\"alert\">{{ error }}</p>\n        }\n\n        <div id=\"inspector-checkpoint-results\" class=\"inspector-command__results\" role=\"listbox\" aria-label=\"Saved checkpoints\">\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading checkpoints\u2026</p>\n          } @else if (!checkpointService.checkpoints().length) {\n            <p class=\"inspector-command__message\" role=\"status\">No checkpoints yet. Save one from the Inspector toolbar.</p>\n          } @else if (!filteredCheckpoints().length) {\n            <p class=\"inspector-command__message\" role=\"status\">No checkpoint matches \u201C{{ checkpointQuery() }}\u201D.</p>\n          } @else {\n            @for (checkpoint of filteredCheckpoints(); track checkpoint.id; let index = $index) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-checkpoint-index]=\"index\"\n                [attr.aria-selected]=\"activeCheckpointIndex() === index\"\n                [class.is-active]=\"activeCheckpointIndex() === index\"\n                [class.is-busy]=\"checkpointService.busy() && activeCheckpointIndex() === index\"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"deletingCheckpointId() === checkpoint.id || editingCheckpointId() === checkpoint.id ? null : restoreCheckpoint(checkpoint)\"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\">Delete \u201C{{ checkpoint.name }}\u201D?</span>\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button type=\"button\" class=\"is-danger\" (click)=\"confirmDelete(checkpoint, $event)\">Delete checkpoint</button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">Keep checkpoint</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__name\">\n                    @if (checkpointService.busy() && activeCheckpointIndex() === index) {\n                      Restoring \u201C{{ checkpoint.name }}\u201D\u2026\n                    } @else {\n                      {{ checkpoint.name }}\n                    }\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button type=\"button\" (click)=\"beginRename(checkpoint, $event)\" [attr.aria-label]=\"'Rename ' + checkpoint.name\">\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path 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\" /></svg>\n                    </button>\n                    <button type=\"button\" (click)=\"beginDelete(checkpoint, $event)\" [attr.aria-label]=\"'Delete ' + checkpoint.name\">\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\" /></svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\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    >{{ toast }}</p>\n  }\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:12px;right:12px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail{display:flex;flex-direction:column;align-items:center;gap:2px;width:30px;padding:2px;border-radius:4px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__divider{width:16px;height:1px;margin-block:2px;background:var(--inspector-panel-edge)}.inspector-toolbar__secondary{display:grid;width:24px}.inspector-toolbar__reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-4px);transition:grid-template-rows .18s cubic-bezier(.16,1,.3,1),opacity .12s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}.inspector-toolbar__reveal-inner{display:grid;gap:2px;min-height:0;overflow:hidden}.inspector-toolbar__rail:hover .inspector-toolbar__reveal,.inspector-toolbar__rail:focus-within .inspector-toolbar__reveal{grid-template-rows:1fr;opacity:1;transform:translateY(2px)}.inspector-command-dialog{--command-surface: oklch(20% .012 270);--command-surface-raised: oklch(25% .014 270);--command-surface-active: oklch(27% .018 270);--command-edge: oklch(39% .014 270);--command-text: oklch(95% .008 270);--command-muted: oklch(73% .018 270);--command-accent: oklch(76% .08 260);--command-danger: oklch(71% .17 25);box-sizing:border-box;inset-block-start:max(40px,10vh);width:min(480px,calc(100vw - 24px));max-width:none;max-height:min(400px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:4px;background:var(--command-surface);color:var(--command-text);box-shadow:0 20px 56px #0102038f;opacity:0;pointer-events:auto;transform:translateY(-6px);transition:opacity .12s cubic-bezier(.7,0,.84,0),transform .12s cubic-bezier(.7,0,.84,0),overlay .12s allow-discrete,display .12s allow-discrete}.inspector-command-dialog[open]{opacity:1;transform:translateY(0);transition-duration:.16s;transition-timing-function:cubic-bezier(.16,1,.3,1)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-6px)}}.inspector-command-dialog::backdrop{background:#0102037a}.inspector-command{display:grid;min-width:0}.inspector-command__search{min-height:44px;padding-inline:12px;border-bottom:1px solid var(--command-edge)}.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{width:100%;height:43px;padding:0;font-size:14px;line-height:1.45}.inspector-command__search:has(input:focus-visible){box-shadow:inset 0 -2px var(--command-accent)}.inspector-command__search input::placeholder{color:var(--command-muted);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{max-height:304px;overflow:auto;padding-block:3px;scrollbar-color:var(--command-edge) transparent}.inspector-command-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:38px;padding-inline:12px 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active)}.inspector-command-row.is-busy{cursor:wait;pointer-events:none}.inspector-command-row__name{overflow:hidden;color:var(--command-text);font-size:12px;font-weight:540;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row.is-active .inspector-command-row__name{font-weight:700}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:4px}.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:26px;min-height:26px;padding:5px;place-items:center;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;line-height:1.3}.inspector-command-row button svg{width:12px;height:12px;fill:currentColor}.inspector-command-row button:hover{border-color:var(--command-edge);background:var(--command-surface-raised);color:var(--command-text)}.inspector-command-row button.is-danger{color:var(--command-danger)}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:2px solid var(--command-accent);outline-offset:2px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:620}.inspector-command-row__rename{grid-column:1 / -1;min-height:30px;padding-inline:8px;border:1px solid var(--command-accent);border-radius:3px;background:var(--command-surface-raised);font-size:12px}.inspector-command__message{margin:0;padding:20px 12px;color:var(--command-muted);font-size:12px;line-height:1.55;text-align:center}.inspector-command__message--error{padding-block:9px;border-bottom:1px solid oklch(45% .1 25);background:#3f1917;color:oklch(89% .06 25);text-align:left}.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:12px;left:50%;z-index:500;margin:0;padding:8px 12px;border:1px solid oklch(48% .04 150);border-radius:4px;background:#152619;color:#cfe9d4;box-shadow:0 16px 40px #01020375;font-size:11px;font-weight:620;line-height:1.35;pointer-events:none;transform:translate(-50%)}.inspector-checkpoint-toast--error{border-color:#9c433f;background:#431614;color:oklch(92% .05 25)}.inspector-icon-button{display:inline-flex;align-items:center;justify-content:center;height:24px;border:0;border-radius:3px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .1s cubic-bezier(.16,1,.3,1),color .1s cubic-bezier(.16,1,.3,1),transform .1s cubic-bezier(.16,1,.3,1);font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{position:relative;width:24px}.inspector-icon-button svg{width:13px;height:13px;fill:currentColor}.inspector-icon-button:active{transform:translateY(1px)}.inspector-icon-button:focus-visible{outline:2px solid var(--inspector-blue);outline-offset:2px}.inspector-icon-button:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--power:hover{background:#ef444429;color:#fecaca}.inspector-tooltip{position:absolute;top:50%;right:calc(100% + 7px);z-index:20;width:max-content;padding:4px 6px;border:1px solid var(--inspector-panel-edge);border-radius:3px;background:#111318fa;color:var(--inspector-text);font-size:10px;font-weight:600;line-height:1.2;opacity:0;pointer-events:none;transform:translate(3px,-50%);transition:opacity .12s cubic-bezier(.16,1,.3,1),transform .12s cubic-bezier(.16,1,.3,1);white-space:nowrap}.inspector-icon-button:hover .inspector-tooltip,.inspector-icon-button:focus-visible .inspector-tooltip{opacity:1;transform:translateY(-50%)}@media (prefers-reduced-motion: reduce){.inspector-toolbar__reveal,.inspector-icon-button,.inspector-tooltip,.inspector-command-dialog,.inspector-command-row__marker{transition-duration:.01ms}.inspector-command-dialog,.inspector-command-dialog[open]{transform: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:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: inspectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inspector-overlay', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  <div class=\"inspector-toolbar\">\n    <div class=\"inspector-toolbar__rail\">\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"toolMode() === 'select'\"\n        (click)=\"setToolMode('select')\"\n        title=\"Select mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"showTypography()\"\n        (click)=\"toggleTypography()\"\n        title=\"Typography mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n        </svg>\n      </button>\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--guide-main\"\n          [class.is-active]=\"toolMode() === 'guides'\"\n          (click)=\"setToolMode('guides')\"\n          title=\"Guides mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 2h1v12H4zM11 2h1v12h-1zM2 4h12v1H2zM2 11h12v1H2z\" />\n          </svg>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--ghost inspector-icon-button--guide-menu\"\n          [class.is-active]=\"guideMenuOpen()\"\n          (click)=\"toggleGuideMenu()\"\n          title=\"Guide options\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4.47 6.97L8 10.5l3.53-3.53-.94-.94L8 8.62 5.41 6.03z\" />\n          </svg>\n        </button>\n\n        @if (guideMenuOpen()) {\n          <div class=\"inspector-guide-menu\">\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'vertical'\"\n              (click)=\"setGuideOrientation('vertical')\"\n            >\n              Vertical\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'horizontal'\"\n              (click)=\"setGuideOrientation('horizontal')\"\n            >\n              Horizontal\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment inspector-segment--danger\"\n              (click)=\"clearGuides()\"\n            >\n              Clear\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:18px;right:18px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__rail{align-items:center}.inspector-guide-group{position:relative;display:flex;gap:0;align-items:center;border-radius:6px}.inspector-guide-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:max-content;flex-direction:column;align-items:stretch}.inspector-guide-menu .inspector-segment{justify-content:flex-start;width:100%}.inspector-icon-button,.inspector-segment{display:inline-flex;align-items:center;justify-content:center;height:26px;border:0;border-radius:6px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .12s ease,color .12s ease;font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{width:26px}.inspector-icon-button svg{width:14px;height:14px;fill:currentColor}.inspector-icon-button:hover,.inspector-segment:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active,.inspector-segment.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--ghost.is-active{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button--guide-main{border-radius:6px 0 0 6px}.inspector-icon-button--guide-menu{width:20px;border-radius:0 6px 6px 0}.inspector-icon-button--guide-menu svg{width:12px;height:12px}.inspector-segment{padding:0 8px;white-space:nowrap}.inspector-segment--danger:hover{background:#ef444429;color:#fecaca}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"] }]
+            args: [{ selector: 'inspector-overlay', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (enabled()) {\n    <div class=\"inspector-toolbar\">\n      <div class=\"inspector-toolbar__rail\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button\"\n          [class.is-active]=\"toolMode() === 'select'\"\n          (click)=\"setToolMode('select')\"\n          aria-label=\"Select mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Select</span>\n        </button>\n\n        @if (checkpointService) {\n          <button\n            type=\"button\"\n            class=\"inspector-icon-button\"\n            (click)=\"saveCheckpoint()\"\n            [disabled]=\"checkpointService.busy()\"\n            aria-label=\"Save checkpoint\"\n          >\n            <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n              <path d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\" />\n            </svg>\n            <span class=\"inspector-tooltip\" role=\"tooltip\">Save checkpoint</span>\n          </button>\n        }\n\n        <div class=\"inspector-toolbar__secondary\">\n          <div class=\"inspector-toolbar__reveal\">\n            <div class=\"inspector-toolbar__reveal-inner\">\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"showTypography()\"\n                (click)=\"toggleTypography()\"\n                aria-label=\"Typography overlay\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Typography</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'vertical'\"\n                (click)=\"activateGuideOrientation('vertical')\"\n                aria-label=\"Vertical guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Vertical guides</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'horizontal'\"\n                (click)=\"activateGuideOrientation('horizontal')\"\n                aria-label=\"Horizontal guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M2 7.25h12v1.5H2z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Horizontal guides</span>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <span class=\"inspector-toolbar__divider\" aria-hidden=\"true\"></span>\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--power\"\n          (click)=\"disableInspector()\"\n          aria-label=\"Disable inspector; press M to enable\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M7.25 1.5h1.5v6h-1.5zM4.1 3.35l.96 1.15A4.25 4.25 0 1 0 10.94 4.5l.96-1.15A5.75 5.75 0 1 1 4.1 3.35z\" />\n          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Disable</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (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 id=\"inspector-command-title\" class=\"inspector-visually-hidden\" for=\"inspector-checkpoint-search\">\n            Search checkpoints\n          </label>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"Find a checkpoint\u2026\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results'\"\n            [attr.aria-activedescendant]=\"filteredCheckpoints().length ? 'inspector-checkpoint-' + filteredCheckpoints()[activeCheckpointIndex()].id : null\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p class=\"inspector-command__message inspector-command__message--error\" role=\"alert\">{{ error }}</p>\n        }\n\n        <div id=\"inspector-checkpoint-results\" class=\"inspector-command__results\" role=\"listbox\" aria-label=\"Saved checkpoints\">\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading checkpoints\u2026</p>\n          } @else if (!checkpointService.checkpoints().length) {\n            <p class=\"inspector-command__message\" role=\"status\">No checkpoints yet. Save one from the Inspector toolbar.</p>\n          } @else if (!filteredCheckpoints().length) {\n            <p class=\"inspector-command__message\" role=\"status\">No checkpoint matches \u201C{{ checkpointQuery() }}\u201D.</p>\n          } @else {\n            @for (checkpoint of filteredCheckpoints(); track checkpoint.id; let index = $index) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-checkpoint-index]=\"index\"\n                [attr.aria-selected]=\"activeCheckpointIndex() === index\"\n                [class.is-active]=\"activeCheckpointIndex() === index\"\n                [class.is-busy]=\"checkpointService.busy() && activeCheckpointIndex() === index\"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"deletingCheckpointId() === checkpoint.id || editingCheckpointId() === checkpoint.id ? null : restoreCheckpoint(checkpoint)\"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\">Delete \u201C{{ checkpoint.name }}\u201D?</span>\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button type=\"button\" class=\"is-danger\" (click)=\"confirmDelete(checkpoint, $event)\">Delete checkpoint</button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">Keep checkpoint</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__name\">\n                    @if (checkpointService.busy() && activeCheckpointIndex() === index) {\n                      Restoring \u201C{{ checkpoint.name }}\u201D\u2026\n                    } @else {\n                      {{ checkpoint.name }}\n                    }\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button type=\"button\" (click)=\"beginRename(checkpoint, $event)\" [attr.aria-label]=\"'Rename ' + checkpoint.name\">\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path 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\" /></svg>\n                    </button>\n                    <button type=\"button\" (click)=\"beginDelete(checkpoint, $event)\" [attr.aria-label]=\"'Delete ' + checkpoint.name\">\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\" /></svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\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    >{{ toast }}</p>\n  }\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:12px;right:12px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail{display:flex;flex-direction:column;align-items:center;gap:2px;width:30px;padding:2px;border-radius:4px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__divider{width:16px;height:1px;margin-block:2px;background:var(--inspector-panel-edge)}.inspector-toolbar__secondary{display:grid;width:24px}.inspector-toolbar__reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-4px);transition:grid-template-rows .18s cubic-bezier(.16,1,.3,1),opacity .12s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}.inspector-toolbar__reveal-inner{display:grid;gap:2px;min-height:0;overflow:hidden}.inspector-toolbar__rail:hover .inspector-toolbar__reveal,.inspector-toolbar__rail:focus-within .inspector-toolbar__reveal{grid-template-rows:1fr;opacity:1;transform:translateY(2px)}.inspector-command-dialog{--command-surface: oklch(20% .012 270);--command-surface-raised: oklch(25% .014 270);--command-surface-active: oklch(27% .018 270);--command-edge: oklch(39% .014 270);--command-text: oklch(95% .008 270);--command-muted: oklch(73% .018 270);--command-accent: oklch(76% .08 260);--command-danger: oklch(71% .17 25);box-sizing:border-box;inset-block-start:max(40px,10vh);width:min(480px,calc(100vw - 24px));max-width:none;max-height:min(400px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:4px;background:var(--command-surface);color:var(--command-text);box-shadow:0 20px 56px #0102038f;opacity:0;pointer-events:auto;transform:translateY(-6px);transition:opacity .12s cubic-bezier(.7,0,.84,0),transform .12s cubic-bezier(.7,0,.84,0),overlay .12s allow-discrete,display .12s allow-discrete}.inspector-command-dialog[open]{opacity:1;transform:translateY(0);transition-duration:.16s;transition-timing-function:cubic-bezier(.16,1,.3,1)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-6px)}}.inspector-command-dialog::backdrop{background:#0102037a}.inspector-command{display:grid;min-width:0}.inspector-command__search{min-height:44px;padding-inline:12px;border-bottom:1px solid var(--command-edge)}.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{width:100%;height:43px;padding:0;font-size:14px;line-height:1.45}.inspector-command__search:has(input:focus-visible){box-shadow:inset 0 -2px var(--command-accent)}.inspector-command__search input::placeholder{color:var(--command-muted);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{max-height:304px;overflow:auto;padding-block:3px;scrollbar-color:var(--command-edge) transparent}.inspector-command-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:38px;padding-inline:12px 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active)}.inspector-command-row.is-busy{cursor:wait;pointer-events:none}.inspector-command-row__name{overflow:hidden;color:var(--command-text);font-size:12px;font-weight:540;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row.is-active .inspector-command-row__name{font-weight:700}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:4px}.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:26px;min-height:26px;padding:5px;place-items:center;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;line-height:1.3}.inspector-command-row button svg{width:12px;height:12px;fill:currentColor}.inspector-command-row button:hover{border-color:var(--command-edge);background:var(--command-surface-raised);color:var(--command-text)}.inspector-command-row button.is-danger{color:var(--command-danger)}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:2px solid var(--command-accent);outline-offset:2px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:620}.inspector-command-row__rename{grid-column:1 / -1;min-height:30px;padding-inline:8px;border:1px solid var(--command-accent);border-radius:3px;background:var(--command-surface-raised);font-size:12px}.inspector-command__message{margin:0;padding:20px 12px;color:var(--command-muted);font-size:12px;line-height:1.55;text-align:center}.inspector-command__message--error{padding-block:9px;border-bottom:1px solid oklch(45% .1 25);background:#3f1917;color:oklch(89% .06 25);text-align:left}.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:12px;left:50%;z-index:500;margin:0;padding:8px 12px;border:1px solid oklch(48% .04 150);border-radius:4px;background:#152619;color:#cfe9d4;box-shadow:0 16px 40px #01020375;font-size:11px;font-weight:620;line-height:1.35;pointer-events:none;transform:translate(-50%)}.inspector-checkpoint-toast--error{border-color:#9c433f;background:#431614;color:oklch(92% .05 25)}.inspector-icon-button{display:inline-flex;align-items:center;justify-content:center;height:24px;border:0;border-radius:3px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .1s cubic-bezier(.16,1,.3,1),color .1s cubic-bezier(.16,1,.3,1),transform .1s cubic-bezier(.16,1,.3,1);font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{position:relative;width:24px}.inspector-icon-button svg{width:13px;height:13px;fill:currentColor}.inspector-icon-button:active{transform:translateY(1px)}.inspector-icon-button:focus-visible{outline:2px solid var(--inspector-blue);outline-offset:2px}.inspector-icon-button:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--power:hover{background:#ef444429;color:#fecaca}.inspector-tooltip{position:absolute;top:50%;right:calc(100% + 7px);z-index:20;width:max-content;padding:4px 6px;border:1px solid var(--inspector-panel-edge);border-radius:3px;background:#111318fa;color:var(--inspector-text);font-size:10px;font-weight:600;line-height:1.2;opacity:0;pointer-events:none;transform:translate(3px,-50%);transition:opacity .12s cubic-bezier(.16,1,.3,1),transform .12s cubic-bezier(.16,1,.3,1);white-space:nowrap}.inspector-icon-button:hover .inspector-tooltip,.inspector-icon-button:focus-visible .inspector-tooltip{opacity:1;transform:translateY(-50%)}@media (prefers-reduced-motion: reduce){.inspector-toolbar__reveal,.inspector-icon-button,.inspector-tooltip,.inspector-command-dialog,.inspector-command-row__marker{transition-duration:.01ms}.inspector-command-dialog,.inspector-command-dialog[open]{transform: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:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -775,5 +1369,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, clamp, createId, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, inspector_STATE_VERSION, inspector_STORAGE_KEY, rectContainsPoint, rectsEqual };
+export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, clamp, createId, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, inspector_STATE_VERSION, inspector_STORAGE_KEY, provideInspectorCheckpoints, rectContainsPoint, rectsEqual };
 //# sourceMappingURL=inspector-ng.mjs.map