@syntrologie/adapt-content 2.8.0-canary.90 → 2.8.0-canary.91

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts

@@ -0,0 +1,62 @@
+/**
+ * AnchorPickerLit — Shared Element Picker Overlay (Lit web component).
+ *
+ * Full-page overlay that lets the user hover and click to select a DOM element.
+ * Returns the element, its CSS selector, and a human-readable description
+ * via custom events.
+ *
+ * Appends its overlay to document.body (light DOM) to use
+ * document.elementFromPoint() for detecting host page elements under the cursor.
+ *
+ * Lit port of AnchorPicker.tsx — preserves all behavior including:
+ * - Mouse tracking with elementFromPoint detection
+ * - Passthrough click mode for PostHog integration
+ * - Element highlight with info tooltip
+ * - Escape key cancellation
+ * - Exclude selector filtering
+ */
+import { LitElement, nothing } from 'lit';
+export interface PickedElement {
+    element: Element;
+    selector: string;
+    description: string;
+}
+export declare class AnchorPickerLit extends LitElement {
+    static properties: {
+        isActive: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        passthroughClicks: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        excludeSelector: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        _hoveredElement: {
+            state: boolean;
+        };
+        _hoveredSelector: {
+            state: boolean;
+        };
+    };
+    isActive: boolean;
+    passthroughClicks: boolean;
+    excludeSelector: string;
+    private _hoveredElement;
+    private _hoveredSelector;
+    private _overlayEl;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _attachDocumentListeners;
+    private _detachDocumentListeners;
+    private _handleMouseMove;
+    private _handleClick;
+    private _handleKeyDown;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+//# sourceMappingURL=AnchorPickerLit.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchorPickerLit.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPickerLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAahD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAgBD,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;MAOxB;IAEF,QAAQ,UAAS;IACjB,iBAAiB,UAAS;IAC1B,eAAe,EAAE,MAAM,CAA4B;IAGnD,OAAO,CAAC,eAAe,CAAwB;IAC/C,OAAO,CAAC,gBAAgB,CAAM;IAG9B,OAAO,CAAC,UAAU,CAA+B;IAIxC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBrD,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,gBAAgB,CAoCtB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,OAAO,CAAC,cAAc,CAUpB;IAIO,MAAM;CA0GhB"}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.js

@@ -0,0 +1,255 @@
+/**
+ * AnchorPickerLit — Shared Element Picker Overlay (Lit web component).
+ *
+ * Full-page overlay that lets the user hover and click to select a DOM element.
+ * Returns the element, its CSS selector, and a human-readable description
+ * via custom events.
+ *
+ * Appends its overlay to document.body (light DOM) to use
+ * document.elementFromPoint() for detecting host page elements under the cursor.
+ *
+ * Lit port of AnchorPicker.tsx — preserves all behavior including:
+ * - Mouse tracking with elementFromPoint detection
+ * - Passthrough click mode for PostHog integration
+ * - Element highlight with info tooltip
+ * - Escape key cancellation
+ * - Exclude selector filtering
+ */
+import { html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
+// =============================================================================
+// Constants
+// =============================================================================
+const HIGHLIGHT_COLOR = '#3b82f6';
+const HIGHLIGHT_BG = 'rgba(59, 130, 246, 0.1)';
+const DEFAULT_EXCLUDE_SELECTOR = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]';
+// =============================================================================
+// Component
+// =============================================================================
+export class AnchorPickerLit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isActive = false;
+        this.passthroughClicks = false;
+        this.excludeSelector = DEFAULT_EXCLUDE_SELECTOR;
+        // Internal state
+        this._hoveredElement = null;
+        this._hoveredSelector = '';
+        // DOM ref for the overlay
+        this._overlayEl = null;
+        // ---- EVENT HANDLERS ----
+        this._handleMouseMove = (e) => {
+            const overlay = this._overlayEl;
+            // In passthrough mode the overlay is already pointerEvents:'none',
+            // so elementFromPoint can see through it -- no toggle needed.
+            // In non-passthrough mode, temporarily disable to detect elements underneath.
+            if (overlay && !this.passthroughClicks) {
+                overlay.style.pointerEvents = 'none';
+            }
+            const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
+            if (overlay && !this.passthroughClicks) {
+                overlay.style.pointerEvents = 'auto';
+            }
+            if (!elementAtPoint) {
+                this._hoveredElement = null;
+                this._hoveredSelector = '';
+                return;
+            }
+            if (this.excludeSelector && elementAtPoint.closest(this.excludeSelector)) {
+                this._hoveredElement = null;
+                this._hoveredSelector = '';
+                return;
+            }
+            if (['HTML', 'BODY', 'HEAD'].includes(elementAtPoint.tagName)) {
+                this._hoveredElement = null;
+                this._hoveredSelector = '';
+                return;
+            }
+            this._hoveredElement = elementAtPoint;
+            this._hoveredSelector = generateSelector(elementAtPoint);
+        };
+        this._handleClick = (e) => {
+            if (this.passthroughClicks)
+                return; // Let click propagate to PostHog
+            e.preventDefault();
+            e.stopPropagation();
+            if (this._hoveredElement && this._hoveredSelector) {
+                let selector = this._hoveredSelector;
+                if (!validateSelector(selector, this._hoveredElement)) {
+                    selector = generateSelector(this._hoveredElement);
+                }
+                this.dispatchEvent(new CustomEvent('pick', {
+                    detail: {
+                        element: this._hoveredElement,
+                        selector,
+                        description: getElementDescription(this._hoveredElement),
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.dispatchEvent(new CustomEvent('cancel', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+    }
+    // No _bound* wrappers needed — methods are arrow class fields
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.isActive) {
+            this._attachDocumentListeners();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._detachDocumentListeners();
+    }
+    updated(changed) {
+        if (changed.has('isActive')) {
+            if (this.isActive) {
+                this._attachDocumentListeners();
+            }
+            else {
+                this._detachDocumentListeners();
+                this._hoveredElement = null;
+                this._hoveredSelector = '';
+            }
+        }
+        // Cache overlay ref after render
+        this._overlayEl = this.querySelector('[data-syntro-anchor-picker]');
+    }
+    // ---- DOCUMENT LISTENERS ----
+    _attachDocumentListeners() {
+        document.addEventListener('mousemove', this._handleMouseMove, true);
+        if (!this.passthroughClicks) {
+            document.addEventListener('click', this._handleClick, true);
+        }
+        document.addEventListener('keydown', this._handleKeyDown, true);
+    }
+    _detachDocumentListeners() {
+        document.removeEventListener('mousemove', this._handleMouseMove, true);
+        document.removeEventListener('click', this._handleClick, true);
+        document.removeEventListener('keydown', this._handleKeyDown, true);
+    }
+    // ---- RENDER ----
+    render() {
+        if (!this.isActive)
+            return nothing;
+        const hovered = this._hoveredElement;
+        const rect = hovered?.getBoundingClientRect() ?? null;
+        return html `
+      <div
+        data-syntro-anchor-picker
+        style=${styleMap({
+            position: 'fixed',
+            inset: '0',
+            cursor: 'crosshair',
+            zIndex: '2147483644',
+            pointerEvents: this.passthroughClicks ? 'none' : 'auto',
+        })}
+      >
+        <!-- Semi-transparent overlay -->
+        <div
+          style=${styleMap({
+            position: 'absolute',
+            inset: '0',
+            background: 'rgba(0, 0, 0, 0.08)',
+            pointerEvents: 'none',
+        })}
+        ></div>
+
+        <!-- Element highlight -->
+        ${hovered && rect
+            ? html `<div
+              style=${styleMap({
+                position: 'fixed',
+                left: `${rect.left - 2}px`,
+                top: `${rect.top - 2}px`,
+                width: `${rect.width + 4}px`,
+                height: `${rect.height + 4}px`,
+                border: `2px solid ${HIGHLIGHT_COLOR}`,
+                backgroundColor: HIGHLIGHT_BG,
+                borderRadius: '4px',
+                boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
+                pointerEvents: 'none',
+                transition: 'all 0.1s ease-out',
+            })}
+            ></div>`
+            : nothing}
+
+        <!-- Element info tooltip near hovered element -->
+        ${hovered && rect
+            ? html `<div
+              class="se-text-xs"
+              style=${styleMap({
+                position: 'fixed',
+                left: `${Math.max(8, Math.min(rect.left, window.innerWidth - 320))}px`,
+                top: `${Math.max(8, rect.top - 68)}px`,
+                backgroundColor: '#1e293b',
+                color: '#e2e8f0',
+                padding: '8px 12px',
+                borderRadius: '6px',
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                zIndex: '1',
+                fontFamily: 'monospace',
+                maxWidth: '300px',
+                pointerEvents: 'none',
+            })}
+            >
+              <div
+                class="se-text-xs"
+                style=${styleMap({
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                marginBottom: '4px',
+                color: '#94a3b8',
+            })}
+              >
+                Click to select
+              </div>
+              <div
+                style=${styleMap({
+                color: '#38bdf8',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            })}
+              >
+                ${this._hoveredSelector}
+              </div>
+              <div
+                style=${styleMap({
+                marginTop: '4px',
+                color: '#cbd5e1',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            })}
+              >
+                ${getElementDescription(hovered)}
+              </div>
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+AnchorPickerLit.properties = {
+    isActive: { type: Boolean, attribute: 'is-active' },
+    passthroughClicks: { type: Boolean, attribute: 'passthrough-clicks' },
+    excludeSelector: { type: String, attribute: 'exclude-selector' },
+    // Internal reactive state (not attributes)
+    _hoveredElement: { state: true },
+    _hoveredSelector: { state: true },
+};
+customElements.define('se-anchor-picker', AnchorPickerLit);

package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * BeforeAfterToggleLit — toggle switch between before/after states.
+ *
+ * Attributes:
+ *   mode: 'before' | 'after'
+ *
+ * Events:
+ *   toggle — CustomEvent<{ mode: 'before' | 'after' }>, bubbles, composed
+ *
+ * Usage:
+ *   <se-before-after-toggle mode="before"></se-before-after-toggle>
+ */
+export declare class BeforeAfterToggleLit extends LitElement {
+    static properties: {
+        mode: {
+            type: StringConstructor;
+        };
+    };
+    mode: 'before' | 'after';
+    createRenderRoot(): this;
+    private _handleToggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=BeforeAfterToggleLit.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BeforeAfterToggleLit.d.ts","sourceRoot":"","sources":["../../src/components/BeforeAfterToggleLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,qBAAa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,UAAU;;;;MAExB;IAEF,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAY;IAE3B,gBAAgB;IAIzB,OAAO,CAAC,aAAa;IAWZ,MAAM;CAwBhB"}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.js

@@ -0,0 +1,55 @@
+import { html, LitElement } from 'lit';
+/**
+ * BeforeAfterToggleLit — toggle switch between before/after states.
+ *
+ * Attributes:
+ *   mode: 'before' | 'after'
+ *
+ * Events:
+ *   toggle — CustomEvent<{ mode: 'before' | 'after' }>, bubbles, composed
+ *
+ * Usage:
+ *   <se-before-after-toggle mode="before"></se-before-after-toggle>
+ */
+export class BeforeAfterToggleLit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mode = 'before';
+    }
+    createRenderRoot() {
+        return this;
+    }
+    _handleToggle(value) {
+        this.mode = value;
+        this.dispatchEvent(new CustomEvent('toggle', {
+            detail: { mode: value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const beforeActive = this.mode === 'before';
+        const afterActive = this.mode === 'after';
+        const baseBtn = 'se-flex-1 se-py-1.5 se-px-3 se-border-none se-text-sm se-font-semibold se-cursor-pointer focus-visible:se-shadow-focus-primary focus-visible:se-outline-none';
+        const beforeClasses = `${baseBtn} ${beforeActive ? 'se-bg-blue-5/30 se-text-blue-5' : 'se-bg-transparent se-text-text-secondary'}`;
+        const afterClasses = `${baseBtn} se-border-l se-border-border-primary ${afterActive ? 'se-bg-blue-5/30 se-text-blue-5' : 'se-bg-transparent se-text-text-secondary'}`;
+        return html `
+      <div class="se-flex se-mb-3 se-rounded-lg se-overflow-hidden se-border se-border-border-primary">
+        <button
+          type="button"
+          class=${beforeClasses}
+          @click=${() => this._handleToggle('before')}
+        >Before</button>
+        <button
+          type="button"
+          class=${afterClasses}
+          @click=${() => this._handleToggle('after')}
+        >After</button>
+      </div>
+    `;
+    }
+}
+BeforeAfterToggleLit.properties = {
+    mode: { type: String },
+};
+customElements.define('se-before-after-toggle', BeforeAfterToggleLit);

package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import type { TriggerWhenStatus } from './ConditionStatusLine';
+/**
+ * ConditionStatusLineLit — inline triggerWhen diagnostic on EditorCard.
+ *
+ * Shows a compact one-line status for items with triggerWhen conditions.
+ * Click to expand per-condition detail (multi-condition case).
+ *
+ * Attributes:
+ *   status — JSON-serialized TriggerWhenStatus (set via property, not attribute)
+ *
+ * Usage:
+ *   const el = document.createElement('se-condition-status-line');
+ *   el.status = { visible: true, isFallback: false, conditions: [...] };
+ */
+export declare class ConditionStatusLineLit extends LitElement {
+    static properties: {
+        status: {
+            type: ObjectConstructor;
+        };
+        _expanded: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    status: TriggerWhenStatus | null;
+    private _expanded;
+    createRenderRoot(): this;
+    private _renderProgressBar;
+    private _renderConditionRow;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=ConditionStatusLineLit.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionStatusLineLit.d.ts","sourceRoot":"","sources":["../../src/components/ConditionStatusLineLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEhF;;;;;;;;;;;;GAYG;AACH,qBAAa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,UAAU;;;;;;;;MAGxB;IAEF,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IACxC,OAAO,CAAC,SAAS,CAAS;IAEjB,gBAAgB;IAIzB,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,mBAAmB;IAwBlB,MAAM;CA+DhB"}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.js

@@ -0,0 +1,118 @@
+import { html, LitElement } from 'lit';
+/**
+ * ConditionStatusLineLit — inline triggerWhen diagnostic on EditorCard.
+ *
+ * Shows a compact one-line status for items with triggerWhen conditions.
+ * Click to expand per-condition detail (multi-condition case).
+ *
+ * Attributes:
+ *   status — JSON-serialized TriggerWhenStatus (set via property, not attribute)
+ *
+ * Usage:
+ *   const el = document.createElement('se-condition-status-line');
+ *   el.status = { visible: true, isFallback: false, conditions: [...] };
+ */
+export class ConditionStatusLineLit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.status = null;
+        this._expanded = false;
+    }
+    createRenderRoot() {
+        return this;
+    }
+    _renderProgressBar(current, target) {
+        const pct = Math.min(100, Math.round((current / Math.max(target, 1)) * 100));
+        const fillClass = pct >= 100 ? 'se-bg-green-4' : 'se-bg-blue-4';
+        return html `
+      <span
+        class="se-inline-block se-w-12 se-h-1.5 se-rounded-full se-bg-white/20 se-align-middle se-ml-1"
+        title="${current}/${target} (${pct}%)"
+      >
+        <span
+          class="se-block se-h-full se-rounded-full se-transition-all ${fillClass}"
+          style="width: ${pct}%"
+        ></span>
+      </span>
+    `;
+    }
+    _renderConditionRow(cs) {
+        return html `
+      <div class="se-flex se-items-center se-gap-1 se-pl-3 se-text-[12px] se-font-medium se-text-text-secondary">
+        ${cs.passed
+            ? html `<svg class="se-w-3 se-h-3 se-text-green-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+            : html `<svg class="se-w-3 se-h-3 se-text-red-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`}
+        <span>${cs.type}:</span>
+        <span class="se-text-text-secondary">${cs.formatted.label}</span>
+        ${cs.formatted.progress
+            ? html `
+              ${this._renderProgressBar(cs.formatted.progress.current, cs.formatted.progress.target)}
+              <span class="se-text-text-secondary se-ml-0.5">
+                ${cs.formatted.progress.current}/${cs.formatted.progress.target}
+              </span>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    render() {
+        if (!this.status)
+            return html ``;
+        const { visible, conditions } = this.status;
+        const passedCount = conditions.filter((c) => c.passed).length;
+        const totalCount = conditions.length;
+        const isSingle = totalCount === 1;
+        const iconColor = visible ? 'se-text-green-4' : 'se-text-yellow-5';
+        // Check icon (visible) or Clock icon (not visible)
+        const statusIcon = visible
+            ? html `<svg class="se-w-3 se-h-3 ${iconColor}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+            : html `<svg class="se-w-3 se-h-3 ${iconColor}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`;
+        if (isSingle) {
+            const cs = conditions[0];
+            return html `
+        <div class="se-text-[12px] se-font-medium se-text-text-secondary se-mt-0.5 se-flex se-items-center se-gap-1">
+          ${statusIcon}
+          <span>${cs.type}:</span>
+          <span class="se-text-text-secondary">${cs.formatted.label}</span>
+          ${cs.formatted.progress
+                ? html `
+                ${this._renderProgressBar(cs.formatted.progress.current, cs.formatted.progress.target)}
+                <span class="se-text-text-secondary se-ml-0.5">
+                  ${cs.formatted.progress.current}/${cs.formatted.progress.target}
+                </span>
+              `
+                : ''}
+        </div>
+      `;
+        }
+        // Multi-condition: summary + expandable detail
+        return html `
+      <div class="se-mt-0.5">
+        <button
+          type="button"
+          class="se-flex se-items-center se-gap-1 se-text-[12px] se-font-medium se-text-text-secondary se-bg-transparent se-border-none se-cursor-pointer se-p-0 hover:se-text-text-primary"
+          @click=${(e) => {
+            e.stopPropagation();
+            this._expanded = !this._expanded;
+        }}
+        >
+          ${statusIcon}
+          <span>${passedCount} of ${totalCount} conditions met</span>
+          <span class="se-text-[11px] se-ml-0.5">${this._expanded ? '▲' : '▼'}</span>
+        </button>
+        ${this._expanded
+            ? html `
+              <div class="se-mt-0.5 se-space-y-0.5">
+                ${conditions.map((cs) => this._renderConditionRow(cs))}
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+}
+ConditionStatusLineLit.properties = {
+    status: { type: Object },
+    _expanded: { type: Boolean, state: true },
+};
+customElements.define('se-condition-status-line', ConditionStatusLineLit);

package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * DetectionBadgeLit — badge showing element detection status.
+ *
+ * Attributes:
+ *   found   — boolean, whether the element was found on the page
+ *   clickable — boolean, whether clicking should be enabled (renders as button)
+ *
+ * Events:
+ *   badge-click — CustomEvent<void>, bubbles, composed (only when clickable=true)
+ *
+ * Usage:
+ *   <se-detection-badge found></se-detection-badge>
+ *   <se-detection-badge found clickable></se-detection-badge>
+ */
+export declare class DetectionBadgeLit extends LitElement {
+    static properties: {
+        found: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+    };
+    found: boolean;
+    clickable: boolean;
+    createRenderRoot(): this;
+    private get _title();
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=DetectionBadgeLit.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetectionBadgeLit.d.ts","sourceRoot":"","sources":["../../src/components/DetectionBadgeLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC;;;;;;;;;;;;;GAaG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,UAAU;;;;;;;MAGxB;IAEF,KAAK,UAAS;IACd,SAAS,UAAS;IAET,gBAAgB;IAIzB,OAAO,KAAK,MAAM,GAKjB;IAED,OAAO,CAAC,YAAY;IAUX,MAAM;CA6BhB"}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.js

@@ -0,0 +1,68 @@
+import { html, LitElement } from 'lit';
+/**
+ * DetectionBadgeLit — badge showing element detection status.
+ *
+ * Attributes:
+ *   found   — boolean, whether the element was found on the page
+ *   clickable — boolean, whether clicking should be enabled (renders as button)
+ *
+ * Events:
+ *   badge-click — CustomEvent<void>, bubbles, composed (only when clickable=true)
+ *
+ * Usage:
+ *   <se-detection-badge found></se-detection-badge>
+ *   <se-detection-badge found clickable></se-detection-badge>
+ */
+export class DetectionBadgeLit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.found = false;
+        this.clickable = false;
+    }
+    createRenderRoot() {
+        return this;
+    }
+    get _title() {
+        if (this.clickable) {
+            return this.found ? 'Click to scroll to element' : 'Click to navigate to page';
+        }
+        return this.found ? 'Found on this page' : 'Not found on this page';
+    }
+    _handleClick(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('badge-click', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const textColor = this.found ? 'se-text-green-4' : 'se-text-text-tertiary';
+        const dotColor = this.found ? 'se-bg-green-4' : 'se-bg-text-tertiary';
+        const dot = html `<span data-indicator class="se-w-1.5 se-h-1.5 se-rounded-full ${dotColor}"></span>`;
+        const baseClasses = `se-inline-flex se-items-center se-gap-1 se-text-xs se-font-medium se-shrink-0 ${textColor}`;
+        if (this.clickable) {
+            return html `
+        <button
+          type="button"
+          class="${baseClasses} se-cursor-pointer hover:se-opacity-80 se-border-none se-bg-transparent se-p-0"
+          title=${this._title}
+          @click=${this._handleClick}
+        >
+          ${dot}
+          GoTo
+        </button>
+      `;
+        }
+        return html `
+      <span class=${baseClasses} title=${this._title}>
+        ${dot}
+        GoTo
+      </span>
+    `;
+    }
+}
+DetectionBadgeLit.properties = {
+    found: { type: Boolean },
+    clickable: { type: Boolean },
+};
+customElements.define('se-detection-badge', DetectionBadgeLit);