inspector-ng 0.0.1

package/fesm2022/inspector-ng.mjs

@@ -0,0 +1,680 @@
+import * as i0 from '@angular/core';
+import { viewChild, signal, computed, effect, PLATFORM_ID, HostListener, Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+const inspector_STORAGE_KEY = "inspector-state";
+const inspector_STATE_VERSION = 1;
+const GUIDE_SNAP_DISTANCE = 10;
+const GUIDE_HITBOX_SIZE = 14;
+
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const getViewportSize = () => ({
+    width: typeof window === 'undefined' ? 1 : window.innerWidth || 1,
+    height: typeof window === 'undefined' ? 1 : window.innerHeight || 1,
+});
+const rectContainsPoint = (rect, point) => point.x >= rect.left &&
+    point.x <= rect.left + rect.width &&
+    point.y >= rect.top &&
+    point.y <= rect.top + rect.height;
+const rectsEqual = (a, b, epsilon = 0.5) => {
+    if (a === b) {
+        return true;
+    }
+    if (!a || !b) {
+        return false;
+    }
+    return (Math.abs(a.left - b.left) < epsilon &&
+        Math.abs(a.top - b.top) < epsilon &&
+        Math.abs(a.width - b.width) < epsilon &&
+        Math.abs(a.height - b.height) < epsilon);
+};
+
+const getDistanceOverlay = (rectA, rectB) => {
+    const rightA = rectA.left + rectA.width;
+    const bottomA = rectA.top + rectA.height;
+    const rightB = rectB.left + rectB.width;
+    const bottomB = rectB.top + rectB.height;
+    const centerAX = rectA.left + rectA.width / 2;
+    const centerAY = rectA.top + rectA.height / 2;
+    let horizontal = null;
+    let vertical = null;
+    const connectors = [];
+    const separatedX = rightA <= rectB.left || rightB <= rectA.left;
+    const separatedY = bottomA <= rectB.top || bottomB <= rectA.top;
+    if (separatedX) {
+        const aIsLeft = rightA <= rectB.left;
+        const x1 = aIsLeft ? rightA : rightB;
+        const x2 = aIsLeft ? rectB.left : rectA.left;
+        const y = centerAY;
+        horizontal = { x1, x2, y, value: Math.abs(x2 - x1) };
+        const edgeBX = aIsLeft ? rectB.left : rightB;
+        if (y < rectB.top) {
+            connectors.push({ x1: edgeBX, y1: y, x2: edgeBX, y2: rectB.top });
+        }
+        else if (y > bottomB) {
+            connectors.push({ x1: edgeBX, y1: y, x2: edgeBX, y2: bottomB });
+        }
+    }
+    if (separatedY) {
+        const aIsTop = bottomA <= rectB.top;
+        const y1 = aIsTop ? bottomA : bottomB;
+        const y2 = aIsTop ? rectB.top : rectA.top;
+        const x = centerAX;
+        vertical = { y1, y2, x, value: Math.abs(y2 - y1) };
+        const edgeBY = aIsTop ? rectB.top : bottomB;
+        if (x < rectB.left) {
+            connectors.push({ x1: x, y1: edgeBY, x2: rectB.left, y2: edgeBY });
+        }
+        else if (x > rightB) {
+            connectors.push({ x1: x, y1: edgeBY, x2: rightB, y2: edgeBY });
+        }
+    }
+    const viewport = getViewportSize();
+    return {
+        rectA,
+        rectB,
+        horizontal,
+        vertical,
+        connectors: connectors
+            .map((segment) => ({
+            x1: clamp(segment.x1, 0, viewport.width),
+            y1: clamp(segment.y1, 0, viewport.height),
+            x2: clamp(segment.x2, 0, viewport.width),
+            y2: clamp(segment.y2, 0, viewport.height),
+        }))
+            .filter((segment) => Math.abs(segment.x1 - segment.x2) > 0.5 ||
+            Math.abs(segment.y1 - segment.y2) > 0.5),
+    };
+};
+
+const getRectFromDom = (element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+};
+const getElementLabel = (element) => {
+    const tag = element.tagName.toLowerCase();
+    const id = element.id ? `#${element.id}` : '';
+    const className = element.className
+        ? `.${element.className.toString().split(' ')[0]}`
+        : '';
+    return `${tag}${id}${className}`;
+};
+const toHex = (value) => value.toString(16).padStart(2, '0');
+const normalizeColorToHex = (color) => {
+    const trimmed = color.trim().toLowerCase();
+    if (trimmed.startsWith('#')) {
+        if (trimmed.length === 4) {
+            return `#${trimmed[1]}${trimmed[1]}${trimmed[2]}${trimmed[2]}${trimmed[3]}${trimmed[3]}`;
+        }
+        return trimmed;
+    }
+    const rgbMatch = trimmed.match(/^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*[0-9.]+\s*)?\)$/);
+    if (!rgbMatch) {
+        return color;
+    }
+    const [, r, g, b] = rgbMatch;
+    return `#${toHex(Math.round(Number(r)))}${toHex(Math.round(Number(g)))}${toHex(Math.round(Number(b)))}`;
+};
+const getTextInspection = (element) => {
+    const style = window.getComputedStyle(element);
+    return {
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+        lineHeight: style.lineHeight,
+        letterSpacing: style.letterSpacing,
+        color: normalizeColorToHex(style.color),
+        textAlign: style.textAlign,
+    };
+};
+const parseEdge = (value) => Number.parseFloat(value) || 0;
+const getInspectMeasurement = (element) => {
+    const rect = getRectFromDom(element);
+    const style = window.getComputedStyle(element);
+    const parentElement = element.parentElement;
+    const parentStyle = parentElement ? window.getComputedStyle(parentElement) : null;
+    const padding = {
+        top: parseEdge(style.paddingTop),
+        right: parseEdge(style.paddingRight),
+        bottom: parseEdge(style.paddingBottom),
+        left: parseEdge(style.paddingLeft),
+    };
+    const margin = {
+        top: parseEdge(style.marginTop),
+        right: parseEdge(style.marginRight),
+        bottom: parseEdge(style.marginBottom),
+        left: parseEdge(style.marginLeft),
+    };
+    const rowGap = parentStyle ? parseEdge(parentStyle.rowGap) : 0;
+    const columnGap = parentStyle ? parseEdge(parentStyle.columnGap) : 0;
+    const parentDisplay = parentStyle?.display ?? '';
+    const hasGap = !!parentElement &&
+        (parentDisplay.includes('flex') || parentDisplay.includes('grid')) &&
+        (rowGap > 0 || columnGap > 0);
+    return {
+        rect,
+        paddingRect: {
+            left: rect.left + padding.left,
+            top: rect.top + padding.top,
+            width: Math.max(0, rect.width - padding.left - padding.right),
+            height: Math.max(0, rect.height - padding.top - padding.bottom),
+        },
+        marginRect: {
+            left: rect.left - margin.left,
+            top: rect.top - margin.top,
+            width: rect.width + margin.left + margin.right,
+            height: rect.height + margin.top + margin.bottom,
+        },
+        padding,
+        margin,
+        gap: {
+            row: rowGap,
+            column: columnGap,
+            active: hasGap,
+        },
+        parentRect: hasGap && parentElement ? getRectFromDom(parentElement) : null,
+        label: getElementLabel(element),
+        styles: getTextInspection(element),
+    };
+};
+const isVisibleTextCandidate = (element) => {
+    const text = element.innerText?.trim() ?? '';
+    if (!text) {
+        return false;
+    }
+    const style = window.getComputedStyle(element);
+    if (style.display === 'none' ||
+        style.visibility === 'hidden' ||
+        Number.parseFloat(style.opacity || '1') === 0) {
+        return false;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width < 8 || rect.height < 8) {
+        return false;
+    }
+    for (const child of Array.from(element.children)) {
+        if (!(child instanceof HTMLElement)) {
+            continue;
+        }
+        if ((child.innerText?.trim() ?? '') && child.getBoundingClientRect().height > 0) {
+            return false;
+        }
+    }
+    return true;
+};
+const getVisibleTextBlocks = (overlayElement, limit = 160) => {
+    if (typeof document === 'undefined') {
+        return [];
+    }
+    const nodes = Array.from(document.querySelectorAll('body *'));
+    const blocks = [];
+    for (const node of nodes) {
+        if (!(node instanceof HTMLElement)) {
+            continue;
+        }
+        if (overlayElement && overlayElement.contains(node)) {
+            continue;
+        }
+        if (!isVisibleTextCandidate(node)) {
+            continue;
+        }
+        const rect = getRectFromDom(node);
+        const text = (node.innerText || node.textContent || '').replace(/\s+/g, ' ').trim();
+        blocks.push({
+            id: `${node.tagName.toLowerCase()}-${Math.round(rect.left)}-${Math.round(rect.top)}-${text.slice(0, 24)}`,
+            rect,
+            text,
+            styles: getTextInspection(node),
+        });
+        if (blocks.length >= limit) {
+            break;
+        }
+    }
+    return blocks;
+};
+const getTargetElement = (point, overlayElement) => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    if (overlayElement) {
+        const previous = overlayElement.style.pointerEvents;
+        overlayElement.style.pointerEvents = 'none';
+        const elements = document.elementsFromPoint(point.x, point.y);
+        overlayElement.style.pointerEvents = previous;
+        for (const element of elements) {
+            if (!(element instanceof HTMLElement)) {
+                continue;
+            }
+            if (overlayElement.contains(element)) {
+                continue;
+            }
+            if (element === document.body || element === document.documentElement) {
+                continue;
+            }
+            const rect = element.getBoundingClientRect();
+            if (rect.width <= 2 || rect.height <= 2) {
+                continue;
+            }
+            return element;
+        }
+        return null;
+    }
+    return document.elementFromPoint(point.x, point.y);
+};
+
+const createId = () => typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID()
+    : `${Date.now()}-${Math.random()}`;
+const formatValue = (value) => Math.round(value);
+
+class inspectorComponent {
+    constructor(platformId) {
+        this.Math = Math;
+        this.formatValue = formatValue;
+        this.guideHitboxSize = GUIDE_HITBOX_SIZE;
+        this.overlayRoot = viewChild("overlayRoot");
+        this.highlightColor = "#4f8cff";
+        this.guideColor = "#ff7a00";
+        this.hoverHighlightEnabled = true;
+        this.persistOnReload = false;
+        this.enabled = signal(false);
+        this.toolMode = signal("none");
+        this.guideOrientation = signal("vertical");
+        this.guides = signal([]);
+        this.hoverRect = signal(null);
+        this.selectedGuideId = signal(null);
+        this.selectedMeasurement = signal(null);
+        this.showTypography = signal(true);
+        this.altPressed = signal(false);
+        this.distanceOverlay = signal(null);
+        this.textBlocks = signal([]);
+        this.guideMenuOpen = signal(false);
+        this.selectedMetaLine = computed(() => {
+            const selected = this.selectedMeasurement();
+            if (!selected) {
+                return "";
+            }
+            return `${selected.label} · ${selected.styles.fontSize} / ${selected.styles.lineHeight} / ${selected.styles.color}`;
+        });
+        this.hydrated = signal(false);
+        this.history = signal([]);
+        this.historyIndex = signal(-1);
+        this.draggingGuideId = null;
+        this.selectedElement = null;
+        this.hoverElement = null;
+        this.canUndo = computed(() => this.historyIndex() > 0);
+        this.canRedo = computed(() => this.historyIndex() >= 0 &&
+            this.historyIndex() < this.history().length - 1);
+        this.trackGuide = (_index, guide) => guide.id;
+        this.trackTextBlock = (_index, block) => block.id;
+        this.trackConnector = (_index, connector) => `${connector.x1}:${connector.y1}:${connector.x2}:${connector.y2}`;
+        this.isBrowser = isPlatformBrowser(platformId);
+        effect(() => {
+            if (!this.persistOnReload || !this.isBrowser || !this.hydrated()) {
+                return;
+            }
+            const payload = {
+                version: inspector_STATE_VERSION,
+                enabled: this.enabled(),
+                toolMode: this.toolMode(),
+                guideOrientation: this.guideOrientation(),
+                guides: this.guides(),
+                showTypography: this.showTypography(),
+            };
+            window.localStorage.setItem(inspector_STORAGE_KEY, JSON.stringify(payload));
+        });
+    }
+    ngOnInit() {
+        if (!this.isBrowser || !this.persistOnReload) {
+            this.hydrated.set(true);
+            return;
+        }
+        const stored = window.localStorage.getItem(inspector_STORAGE_KEY);
+        if (!stored) {
+            this.hydrated.set(true);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(stored);
+            if (parsed.version === inspector_STATE_VERSION) {
+                this.enabled.set(parsed.enabled);
+                this.toolMode.set(parsed.toolMode);
+                this.guideOrientation.set(parsed.guideOrientation);
+                this.guides.set(parsed.guides ?? []);
+                this.showTypography.set(parsed.showTypography ?? true);
+                this.recordHistory(parsed.guides ?? []);
+            }
+        }
+        catch {
+            // ignore malformed state
+        }
+        this.hydrated.set(true);
+        this.refreshTypographyBlocks();
+    }
+    setToolMode(mode) {
+        if (!this.enabled()) {
+            this.enabled.set(true);
+        }
+        this.toolMode.set(this.toolMode() === mode ? "none" : mode);
+        this.hoverRect.set(null);
+        this.distanceOverlay.set(null);
+        this.refreshTypographyBlocks();
+    }
+    setGuideOrientation(orientation) {
+        this.guideOrientation.set(orientation);
+    }
+    toggleTypography() {
+        this.showTypography.update((value) => !value);
+        this.refreshTypographyBlocks();
+    }
+    toggleGuideMenu() {
+        this.guideMenuOpen.update((value) => !value);
+    }
+    clearGuides() {
+        this.guides.set([]);
+        this.selectedGuideId.set(null);
+        this.recordHistory([]);
+    }
+    startGuideDrag(event, guide) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.draggingGuideId = guide.id;
+        this.selectedGuideId.set(guide.id);
+    }
+    formatEdges(edges) {
+        return `${formatValue(edges.top)} ${formatValue(edges.right)} ${formatValue(edges.bottom)} ${formatValue(edges.left)}`;
+    }
+    formatGap(selected) {
+        return `${formatValue(selected.gap.row)} / ${formatValue(selected.gap.column)}`;
+    }
+    handleKeydown(event) {
+        const key = event.key.toLowerCase();
+        if (key === "m") {
+            event.preventDefault();
+            this.enabled.update((value) => !value);
+            if (!this.enabled()) {
+                this.toolMode.set("none");
+                this.hoverRect.set(null);
+                this.selectedGuideId.set(null);
+                this.distanceOverlay.set(null);
+                this.textBlocks.set([]);
+            }
+            this.refreshTypographyBlocks();
+            return;
+        }
+        if (!this.enabled()) {
+            return;
+        }
+        if ((event.metaKey || event.ctrlKey) && key === "z") {
+            event.preventDefault();
+            event.shiftKey ? this.redo() : this.undo();
+            return;
+        }
+        if (key === "s") {
+            event.preventDefault();
+            this.setToolMode("select");
+            return;
+        }
+        if (key === "g") {
+            event.preventDefault();
+            this.setToolMode("guides");
+            return;
+        }
+        if (key === "h") {
+            event.preventDefault();
+            this.setGuideOrientation("horizontal");
+            return;
+        }
+        if (key === "v") {
+            event.preventDefault();
+            this.setGuideOrientation("vertical");
+            return;
+        }
+        if (event.key === "Alt") {
+            this.altPressed.set(true);
+            this.updateDistanceOverlay();
+            return;
+        }
+        if (key === "escape") {
+            event.preventDefault();
+            this.selectedMeasurement.set(null);
+            this.selectedGuideId.set(null);
+            this.hoverRect.set(null);
+            this.distanceOverlay.set(null);
+            this.selectedElement = null;
+            this.hoverElement = null;
+            this.clearGuides();
+            this.refreshTypographyBlocks();
+            return;
+        }
+        if ((key === "backspace" || key === "delete") && this.selectedGuideId()) {
+            event.preventDefault();
+            const nextGuides = this.guides().filter((guide) => guide.id !== this.selectedGuideId());
+            this.guides.set(nextGuides);
+            this.selectedGuideId.set(null);
+            this.recordHistory(nextGuides);
+        }
+    }
+    handleKeyup(event) {
+        if (event.key === "Alt") {
+            this.altPressed.set(false);
+            this.distanceOverlay.set(null);
+        }
+    }
+    handlePointerMove(event) {
+        if (!this.enabled() || !this.isBrowser) {
+            return;
+        }
+        if (this.draggingGuideId) {
+            const viewport = getViewportSize();
+            this.guides.set(this.guides().map((guide) => {
+                if (guide.id !== this.draggingGuideId) {
+                    return guide;
+                }
+                const rawPosition = guide.orientation === "vertical" ? event.clientX : event.clientY;
+                const max = guide.orientation === "vertical" ? viewport.width : viewport.height;
+                return { ...guide, position: clamp(rawPosition, 0, max) };
+            }));
+            return;
+        }
+        if (this.toolMode() !== "select" || !this.hoverHighlightEnabled) {
+            this.hoverRect.set(null);
+            this.hoverElement = null;
+            if (!this.altPressed()) {
+                return;
+            }
+        }
+        const target = getTargetElement({ x: event.clientX, y: event.clientY }, this.overlayRoot()?.nativeElement ?? null);
+        if (!target) {
+            this.hoverRect.set(null);
+            this.hoverElement = null;
+            this.distanceOverlay.set(null);
+            return;
+        }
+        const rect = getRectFromDom(target);
+        this.hoverElement = target;
+        if (!rectsEqual(rect, this.hoverRect())) {
+            this.hoverRect.set(rect);
+        }
+        this.updateDistanceOverlay();
+        this.refreshTypographyBlocks();
+    }
+    handlePointerUp() {
+        if (!this.draggingGuideId) {
+            return;
+        }
+        this.recordHistory(this.guides());
+        this.draggingGuideId = null;
+    }
+    handleClick(event) {
+        if (!this.enabled() || !this.isBrowser) {
+            return;
+        }
+        const overlay = this.overlayRoot()?.nativeElement ?? null;
+        if (this.toolMode() === "guides") {
+            if (overlay && overlay.contains(event.target)) {
+                return;
+            }
+            this.addGuide({
+                id: createId(),
+                orientation: this.guideOrientation(),
+                position: this.guideOrientation() === "vertical"
+                    ? this.snapGuide(event.clientX)
+                    : this.snapGuide(event.clientY),
+            });
+            return;
+        }
+        if (this.toolMode() !== "select") {
+            return;
+        }
+        const target = getTargetElement({ x: event.clientX, y: event.clientY }, overlay);
+        if (!target) {
+            this.selectedMeasurement.set(null);
+            this.selectedElement = null;
+            this.distanceOverlay.set(null);
+            this.refreshTypographyBlocks();
+            return;
+        }
+        this.selectedMeasurement.set(getInspectMeasurement(target));
+        this.selectedElement = target;
+        this.selectedGuideId.set(this.findGuideAtPoint(event.clientX, event.clientY));
+        this.updateDistanceOverlay();
+        this.refreshTypographyBlocks();
+    }
+    handleViewportChange() {
+        if (this.selectedElement && document.contains(this.selectedElement)) {
+            this.selectedMeasurement.set(getInspectMeasurement(this.selectedElement));
+        }
+        this.updateDistanceOverlay();
+        this.refreshTypographyBlocks();
+    }
+    updateDistanceOverlay() {
+        if (!this.altPressed() ||
+            !this.selectedElement ||
+            !this.hoverElement ||
+            this.selectedElement === this.hoverElement ||
+            this.selectedElement.contains(this.hoverElement) ||
+            this.hoverElement.contains(this.selectedElement)) {
+            this.distanceOverlay.set(null);
+            return;
+        }
+        this.distanceOverlay.set(getDistanceOverlay(getRectFromDom(this.selectedElement), getRectFromDom(this.hoverElement)));
+    }
+    refreshTypographyBlocks() {
+        if (!this.isBrowser || !this.enabled() || !this.showTypography()) {
+            this.textBlocks.set([]);
+            return;
+        }
+        const viewport = getViewportSize();
+        this.textBlocks.set(getVisibleTextBlocks(this.overlayRoot()?.nativeElement ?? null).map((block) => ({
+            ...block,
+            rect: {
+                ...block.rect,
+                left: clamp(block.rect.left, 0, viewport.width - 12),
+                top: clamp(block.rect.top, 14, viewport.height),
+            },
+        })));
+    }
+    addGuide(guide) {
+        const nextGuides = [...this.guides(), guide];
+        this.guides.set(nextGuides);
+        this.selectedGuideId.set(guide.id);
+        this.recordHistory(nextGuides);
+    }
+    snapGuide(position) {
+        for (const guide of this.guides()) {
+            if (Math.abs(guide.position - position) <= GUIDE_SNAP_DISTANCE) {
+                return guide.position;
+            }
+        }
+        return position;
+    }
+    findGuideAtPoint(x, y) {
+        for (const guide of this.guides()) {
+            if (guide.orientation === "vertical" &&
+                Math.abs(guide.position - x) <= GUIDE_HITBOX_SIZE) {
+                return guide.id;
+            }
+            if (guide.orientation === "horizontal" &&
+                Math.abs(guide.position - y) <= GUIDE_HITBOX_SIZE) {
+                return guide.id;
+            }
+        }
+        return null;
+    }
+    undo() {
+        if (!this.canUndo()) {
+            return;
+        }
+        const nextIndex = this.historyIndex() - 1;
+        this.historyIndex.set(nextIndex);
+        this.guides.set(this.cloneGuides(this.history()[nextIndex]));
+    }
+    redo() {
+        if (!this.canRedo()) {
+            return;
+        }
+        const nextIndex = this.historyIndex() + 1;
+        this.historyIndex.set(nextIndex);
+        this.guides.set(this.cloneGuides(this.history()[nextIndex]));
+    }
+    recordHistory(guides) {
+        const base = this.history().slice(0, this.historyIndex() + 1);
+        base.push(this.cloneGuides(guides));
+        this.history.set(base);
+        this.historyIndex.set(base.length - 1);
+    }
+    cloneGuides(guides) {
+        return guides.map((guide) => ({ ...guide }));
+    }
+    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\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button\"\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\"\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\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>\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    @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:2147483647;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}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:6px;padding:6px;border-radius:14px;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:4px;align-items:center}.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:28px;border:0;border-radius:10px;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:28px}.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-segment{padding:0 10px;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-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\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button\"\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\"\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\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>\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    @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:2147483647;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}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:6px;padding:6px;border-radius:14px;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:4px;align-items:center}.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:28px;border:0;border-radius:10px;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:28px}.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-segment{padding:0 10px;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-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]
+                }] }], propDecorators: { highlightColor: [{
+                type: Input
+            }], guideColor: [{
+                type: Input
+            }], hoverHighlightEnabled: [{
+                type: Input
+            }], persistOnReload: [{
+                type: Input
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ["window:keydown", ["$event"]]
+            }], handleKeyup: [{
+                type: HostListener,
+                args: ["window:keyup", ["$event"]]
+            }], handlePointerMove: [{
+                type: HostListener,
+                args: ["window:pointermove", ["$event"]]
+            }], handlePointerUp: [{
+                type: HostListener,
+                args: ["window:pointerup"]
+            }], handleClick: [{
+                type: HostListener,
+                args: ["window:click", ["$event"]]
+            }], handleViewportChange: [{
+                type: HostListener,
+                args: ["window:resize"]
+            }, {
+                type: HostListener,
+                args: ["window:scroll"]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, clamp, createId, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, inspector_STATE_VERSION, inspector_STORAGE_KEY, rectContainsPoint, rectsEqual };
+//# sourceMappingURL=inspector-ng.mjs.map