@syntrologie/adapt-nav 2.13.0 → 2.15.0

package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.js

@@ -0,0 +1,476 @@
+/**
+ * PanelShellController — Lit ReactiveController for draggable/resizable panels.
+ *
+ * Owns geometry state (position, size, dock), pointer-event handlers for the
+ * drag FAB and 8 resize handles, localStorage persistence, and viewport
+ * clamping. A consuming LitElement calls `attachFab(el)` / `attachHandle(el, dir)`
+ * on its rendered DOM to hook up pointer events, and reads `panelStyles` /
+ * `fabStyles` to position the panel + FAB.
+ *
+ * Why a controller, not a wrapper element: `<slot>`-based wrapper elements
+ * don't compose well in light DOM (Lit wipes children on render), and shadow
+ * DOM breaks Playwright child selectors used by E2E tests. A ReactiveController
+ * is the Lit-idiomatic way to share stateful logic across elements.
+ *
+ * Emits one callback: `onToggle` when the FAB is pressed without dragging.
+ */
+import { panelShell } from '@syntro/design-system';
+// =============================================================================
+// Constants
+// =============================================================================
+const DEFAULTS = {
+    minWidth: panelShell.behavior.minWidth,
+    minHeight: panelShell.behavior.minHeight,
+    dragThreshold: panelShell.behavior.dragThreshold,
+    snapThreshold: panelShell.behavior.snapThreshold,
+    fabSize: panelShell.fab.size,
+    fabInset: panelShell.fab.inset,
+    storageKey: 'syntro:editor-panel',
+};
+const HANDLE_SIZE = panelShell.behavior.handleSize;
+// =============================================================================
+// Helpers
+// =============================================================================
+export function makeResizeHandles() {
+    return [
+        {
+            dir: 'n',
+            style: {
+                top: '0',
+                left: `${HANDLE_SIZE}px`,
+                right: `${HANDLE_SIZE}px`,
+                height: `${HANDLE_SIZE}px`,
+            },
+            cursor: 'ns-resize',
+        },
+        {
+            dir: 's',
+            style: {
+                bottom: '0',
+                left: `${HANDLE_SIZE}px`,
+                right: `${HANDLE_SIZE}px`,
+                height: `${HANDLE_SIZE}px`,
+            },
+            cursor: 'ns-resize',
+        },
+        {
+            dir: 'e',
+            style: {
+                right: '0',
+                top: `${HANDLE_SIZE}px`,
+                bottom: `${HANDLE_SIZE}px`,
+                width: `${HANDLE_SIZE}px`,
+            },
+            cursor: 'ew-resize',
+        },
+        {
+            dir: 'w',
+            style: {
+                left: '0',
+                top: `${HANDLE_SIZE}px`,
+                bottom: `${HANDLE_SIZE}px`,
+                width: `${HANDLE_SIZE}px`,
+            },
+            cursor: 'ew-resize',
+        },
+        {
+            dir: 'ne',
+            style: {
+                top: '0',
+                right: '0',
+                width: `${HANDLE_SIZE * 2}px`,
+                height: `${HANDLE_SIZE * 2}px`,
+            },
+            cursor: 'nesw-resize',
+        },
+        {
+            dir: 'nw',
+            style: {
+                top: '0',
+                left: '0',
+                width: `${HANDLE_SIZE * 2}px`,
+                height: `${HANDLE_SIZE * 2}px`,
+            },
+            cursor: 'nwse-resize',
+        },
+        {
+            dir: 'se',
+            style: {
+                bottom: '0',
+                right: '0',
+                width: `${HANDLE_SIZE * 2}px`,
+                height: `${HANDLE_SIZE * 2}px`,
+            },
+            cursor: 'nwse-resize',
+        },
+        {
+            dir: 'sw',
+            style: {
+                bottom: '0',
+                left: '0',
+                width: `${HANDLE_SIZE * 2}px`,
+                height: `${HANDLE_SIZE * 2}px`,
+            },
+            cursor: 'nesw-resize',
+        },
+    ];
+}
+// =============================================================================
+// Controller
+// =============================================================================
+export class PanelShellController {
+    constructor(host, options = {}) {
+        this._panelEl = null;
+        this._fabEl = null;
+        // Drag state
+        this._isDragging = false;
+        this._hasMoved = false;
+        this._dragOffset = { x: 0, y: 0 };
+        this._startPanelPos = { x: 0, y: 0 };
+        this._pendingGeo = null;
+        // Resize state
+        this._activeResize = null;
+        this._resizeStartMouse = { x: 0, y: 0 };
+        // ---- FAB pointer handlers ----
+        this.handleFabPointerDown = (e) => {
+            this._isDragging = true;
+            this._hasMoved = false;
+            const rect = this.rect;
+            this._startPanelPos = { x: rect.left, y: rect.top };
+            this._dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+            try {
+                e.target.setPointerCapture(e.pointerId);
+            }
+            catch {
+                // best-effort
+            }
+            e.preventDefault();
+        };
+        this.handleFabPointerMove = (e) => {
+            if (!this._isDragging)
+                return;
+            const newX = e.clientX - this._dragOffset.x;
+            const newY = e.clientY - this._dragOffset.y;
+            if (!this._hasMoved) {
+                const dx = Math.abs(newX - this._startPanelPos.x);
+                const dy = Math.abs(newY - this._startPanelPos.y);
+                if (dx < this.opts.dragThreshold && dy < this.opts.dragThreshold)
+                    return;
+                this._hasMoved = true;
+            }
+            const geo = this._geometry;
+            const height = geo.docked ? window.innerHeight : geo.height;
+            this._writeStylesDuringGesture({ x: newX, y: newY, width: geo.width, height });
+            this._pendingGeo = { x: newX, y: newY, width: geo.width, height, docked: null };
+        };
+        this.handleFabPointerUp = (e) => {
+            try {
+                e.target.releasePointerCapture(e.pointerId);
+            }
+            catch {
+                // best-effort
+            }
+            const wasDragging = this._hasMoved;
+            this._isDragging = false;
+            this._hasMoved = false;
+            if (!wasDragging) {
+                this.opts.onToggle?.();
+                return;
+            }
+            if (this._pendingGeo) {
+                const geo = this._pendingGeo;
+                if (geo.x <= this.opts.snapThreshold) {
+                    this._commit({ ...geo, docked: 'left', x: 0, y: 0 });
+                }
+                else if (geo.x + geo.width >= window.innerWidth - this.opts.snapThreshold) {
+                    this._commit({ ...geo, docked: 'right', x: 0, y: 0 });
+                }
+                else {
+                    this._commit(geo);
+                }
+                this._pendingGeo = null;
+            }
+        };
+        // ---- Resize pointer handlers ----
+        this.handleResizePointerDown = (dir, e) => {
+            let geo = this._geometry;
+            if (geo.docked) {
+                geo = this._undockGeometry(geo);
+                this._commit(geo);
+            }
+            this._activeResize = dir;
+            this._resizeStartMouse = { x: e.clientX, y: e.clientY };
+            this._resizeStartGeo = { ...geo };
+            try {
+                e.target.setPointerCapture(e.pointerId);
+            }
+            catch {
+                // best-effort
+            }
+            e.preventDefault();
+        };
+        this.handleResizePointerMove = (e) => {
+            if (!this._activeResize)
+                return;
+            const dx = e.clientX - this._resizeStartMouse.x;
+            const dy = e.clientY - this._resizeStartMouse.y;
+            const dir = this._activeResize;
+            const start = this._resizeStartGeo;
+            let { x, y, width, height } = start;
+            if (dir.includes('e'))
+                width = Math.max(this.opts.minWidth, start.width + dx);
+            if (dir.includes('w')) {
+                const newW = Math.max(this.opts.minWidth, start.width - dx);
+                x = start.x + start.width - newW;
+                width = newW;
+            }
+            if (dir.includes('s'))
+                height = Math.max(this.opts.minHeight, start.height + dy);
+            if (dir.includes('n')) {
+                const newH = Math.max(this.opts.minHeight, start.height - dy);
+                y = start.y + start.height - newH;
+                height = newH;
+            }
+            this._writeStylesDuringGesture({ x, y, width, height });
+            this._pendingGeo = { x, y, width, height, docked: null };
+        };
+        this.handleResizePointerUp = (e) => {
+            try {
+                e.target.releasePointerCapture(e.pointerId);
+            }
+            catch {
+                // best-effort
+            }
+            this._activeResize = null;
+            if (this._pendingGeo) {
+                this._commit(this._pendingGeo);
+                this._pendingGeo = null;
+            }
+        };
+        this._onWindowResize = () => {
+            this._commit(this._clampToViewport(this._geometry));
+        };
+        this.host = host;
+        this.opts = {
+            storageKey: options.storageKey ?? DEFAULTS.storageKey,
+            minWidth: options.minWidth ?? DEFAULTS.minWidth,
+            minHeight: options.minHeight ?? DEFAULTS.minHeight,
+            dragThreshold: options.dragThreshold ?? DEFAULTS.dragThreshold,
+            snapThreshold: options.snapThreshold ?? DEFAULTS.snapThreshold,
+            fabSize: options.fabSize ?? DEFAULTS.fabSize,
+            fabInset: options.fabInset ?? DEFAULTS.fabInset,
+            onToggle: options.onToggle,
+            defaultGeometry: this._resolveDefaultGeometry(options.defaultGeometry),
+        };
+        this._geometry = this.opts.defaultGeometry;
+        this._resizeStartGeo = this._geometry;
+        host.addController(this);
+    }
+    // ---- Public API ----
+    /** Current geometry (read-only snapshot). */
+    get geometry() {
+        return this._geometry;
+    }
+    /** Pixel rect of the panel, resolving docked positions. */
+    get rect() {
+        return this._panelRect(this._geometry);
+    }
+    /** Pixel right edge of the panel (useful for positioning adjacent UI). */
+    get rightEdge() {
+        const r = this.rect;
+        return r.left + r.width;
+    }
+    /** Set geometry directly — useful for testing or external state sync. */
+    setGeometry(geo) {
+        this._geometry = geo;
+        this._saveGeometry(geo);
+        this.host.requestUpdate();
+    }
+    /** Reset geometry to default (and clear persisted state). */
+    reset() {
+        this._geometry = this.opts.defaultGeometry;
+        try {
+            localStorage.removeItem(this.opts.storageKey);
+        }
+        catch {
+            // ignore
+        }
+        this.host.requestUpdate();
+    }
+    /** Styles to apply to the panel element. */
+    panelStyles() {
+        const geo = this._geometry;
+        const blur = `blur(${panelShell.backdropBlur})`;
+        const shadow = geo.docked === 'right'
+            ? panelShell.shadows.dockedRight
+            : geo.docked === 'left'
+                ? panelShell.shadows.dockedLeft
+                : panelShell.shadows.floating;
+        const styles = {
+            position: 'fixed',
+            pointerEvents: 'auto',
+            background: panelShell.background,
+            backdropFilter: blur,
+            webkitBackdropFilter: blur,
+            boxShadow: shadow,
+            overflow: 'hidden',
+        };
+        if (geo.docked === 'left') {
+            styles.top = '0';
+            styles.left = '0';
+            styles.width = `${geo.width}px`;
+            styles.height = '100vh';
+        }
+        else if (geo.docked === 'right') {
+            styles.top = '0';
+            styles.right = '0';
+            styles.width = `${geo.width}px`;
+            styles.height = '100vh';
+        }
+        else {
+            styles.top = `${geo.y}px`;
+            styles.left = `${geo.x}px`;
+            styles.width = `${geo.width}px`;
+            styles.height = `${geo.height}px`;
+        }
+        return styles;
+    }
+    /** Styles to apply to the FAB button. `isOpen` adjusts the shadow. */
+    fabStyles(isOpen) {
+        const rect = this.rect;
+        return {
+            position: 'fixed',
+            left: `${rect.left + this.opts.fabInset}px`,
+            top: `${rect.top + this.opts.fabInset}px`,
+            pointerEvents: 'auto',
+            width: `${this.opts.fabSize}px`,
+            height: `${this.opts.fabSize}px`,
+            borderRadius: '50%',
+            border: panelShell.fab.border,
+            cursor: 'grab',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: panelShell.fab.background,
+            color: panelShell.fab.color,
+            boxShadow: isOpen ? panelShell.fab.shadowOpen : panelShell.fab.shadowClosed,
+            transition: 'box-shadow 150ms ease',
+            touchAction: 'none',
+            userSelect: 'none',
+            webkitUserSelect: 'none',
+        };
+    }
+    /** Direction descriptors for the 8 resize handles. */
+    get handles() {
+        return makeResizeHandles();
+    }
+    /** Bind the current panel element so the controller can direct-write styles during drag/resize. */
+    attachPanel(el) {
+        this._panelEl = el;
+    }
+    /** Bind the current FAB element. */
+    attachFab(el) {
+        this._fabEl = el;
+    }
+    // ---- ReactiveController lifecycle ----
+    hostConnected() {
+        this._geometry = this._loadGeometry();
+        this.host.requestUpdate();
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this._onWindowResize);
+        }
+    }
+    hostDisconnected() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this._onWindowResize);
+        }
+    }
+    // ---- Internals ----
+    _commit(geo) {
+        this._geometry = geo;
+        this._saveGeometry(geo);
+        this.host.requestUpdate();
+    }
+    _writeStylesDuringGesture({ x, y, width, height, }) {
+        if (this._panelEl) {
+            this._panelEl.style.left = `${x}px`;
+            this._panelEl.style.top = `${y}px`;
+            this._panelEl.style.right = 'auto';
+            this._panelEl.style.width = `${width}px`;
+            this._panelEl.style.height = `${height}px`;
+        }
+        if (this._fabEl) {
+            this._fabEl.style.left = `${x + this.opts.fabInset}px`;
+            this._fabEl.style.top = `${y + this.opts.fabInset}px`;
+        }
+    }
+    _clampToViewport(geo) {
+        if (geo.docked)
+            return geo;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        return {
+            ...geo,
+            x: Math.max(-(geo.width - this.opts.fabSize), Math.min(geo.x, vw - this.opts.fabSize)),
+            y: Math.max(-this.opts.fabInset, Math.min(geo.y, vh - this.opts.fabSize - this.opts.fabInset)),
+        };
+    }
+    _undockGeometry(geo) {
+        const r = this._panelRect(geo);
+        return { x: r.left, y: r.top, width: geo.width, height: r.height, docked: null };
+    }
+    _panelRect(geo) {
+        if (geo.docked === 'left') {
+            return { top: 0, left: 0, width: geo.width, height: window.innerHeight };
+        }
+        if (geo.docked === 'right') {
+            return {
+                top: 0,
+                left: window.innerWidth - geo.width,
+                width: geo.width,
+                height: window.innerHeight,
+            };
+        }
+        const { x: left, y: top, width, height } = geo;
+        return { top, left, width, height };
+    }
+    _loadGeometry() {
+        if (typeof window === 'undefined')
+            return this.opts.defaultGeometry;
+        try {
+            const raw = localStorage.getItem(this.opts.storageKey);
+            if (!raw)
+                return this.opts.defaultGeometry;
+            const p = JSON.parse(raw);
+            return {
+                x: typeof p.x === 'number' ? p.x : 0,
+                y: typeof p.y === 'number' ? p.y : 0,
+                width: Math.max(this.opts.minWidth, typeof p.width === 'number' ? p.width : this.opts.minWidth),
+                height: Math.max(this.opts.minHeight, typeof p.height === 'number' ? p.height : window.innerHeight),
+                docked: p.docked === 'left' || p.docked === 'right' ? p.docked : null,
+            };
+        }
+        catch {
+            return this.opts.defaultGeometry;
+        }
+    }
+    _saveGeometry(geo) {
+        try {
+            localStorage.setItem(this.opts.storageKey, JSON.stringify(geo));
+        }
+        catch {
+            // ignore
+        }
+    }
+    _resolveDefaultGeometry(partial) {
+        const w = typeof window !== 'undefined' ? window : null;
+        const base = {
+            x: 0,
+            y: 0,
+            width: DEFAULTS.minWidth,
+            height: w ? w.innerHeight : 800,
+            docked: 'right',
+        };
+        return { ...base, ...(partial ?? {}) };
+    }
+}

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

@@ -23,6 +23,8 @@ export { EmptyState } from './components/EmptyState';
 export { GroupHeader } from './components/GroupHeader';
 export type { TriggerJourneyProps } from './components/TriggerJourney';
 export { TriggerJourney } from './components/TriggerJourney';
+export type { PanelGeometry, PanelShellControllerOptions, ResizeDir, ResizeHandleDef, } from './controllers/PanelShellController';
+export { makeResizeHandles, PanelShellController } from './controllers/PanelShellController';
 export type { ConditionProgress, FormattedCondition } from './formatConditionLabel';
 export { formatConditionLabel } from './formatConditionLabel';
 export { useElementRect } from './hooks/useElementRect';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EACL,KAAK,UAAU,EACf,0BAA0B,EAC1B,oBAAoB,EACpB,KAAK,cAAc,GACpB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EACV,aAAa,EACb,2BAA2B,EAC3B,SAAS,EACT,eAAe,GAChB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC7F,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EACL,KAAK,UAAU,EACf,0BAA0B,EAC1B,oBAAoB,EACpB,KAAK,cAAc,GACpB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC"}

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

@@ -18,6 +18,7 @@ export { ElementHighlight } from './components/ElementHighlight';
 export { EmptyState } from './components/EmptyState';
 export { GroupHeader } from './components/GroupHeader';
 export { TriggerJourney } from './components/TriggerJourney';
+export { makeResizeHandles, PanelShellController } from './controllers/PanelShellController';
 export { formatConditionLabel } from './formatConditionLabel';
 export { useElementRect } from './hooks/useElementRect';
 export { useTriggerWhenStatus } from './hooks/useTriggerWhenStatus';

package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Side-effect-only imports that register all Lit custom elements
+ * from shared-editor-ui. Import this file to ensure se-editor-card,
+ * se-group-header, etc. are available in the custom element registry.
+ *
+ * Does NOT pull in any React dependencies.
+ */
+import './components/AnchorPickerLit';
+import './components/EditorCardLit';
+import './components/EditorPanelShellLit';
+import './components/EditorTextareaLit';
+import './components/ElementHighlightLit';
+import './components/EmptyStateLit';
+import './components/GroupHeaderLit';
+//# sourceMappingURL=lit-elements.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-elements.d.ts","sourceRoot":"","sources":["../src/lit-elements.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC"}

package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.js

@@ -0,0 +1,14 @@
+/**
+ * Side-effect-only imports that register all Lit custom elements
+ * from shared-editor-ui. Import this file to ensure se-editor-card,
+ * se-group-header, etc. are available in the custom element registry.
+ *
+ * Does NOT pull in any React dependencies.
+ */
+import './components/AnchorPickerLit';
+import './components/EditorCardLit';
+import './components/EditorPanelShellLit';
+import './components/EditorTextareaLit';
+import './components/ElementHighlightLit';
+import './components/EmptyStateLit';
+import './components/GroupHeaderLit';

package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts

@@ -29,9 +29,5 @@ export interface BuildActionStepOptions {
     /** If true, infer $pageview for <a> elements with internal href */
     inferPageview?: boolean;
 }
-/**
- * Build a PostHog action step from a selected element in the chain.
- * Does NOT include `selector` — it's not supported in Athena.
- */
 export declare function buildActionStepFromElement(element: PostHogElement, pageUrl: string, options?: BuildActionStepOptions): ActionStep;
 //# sourceMappingURL=elementChainRecommender.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elementChainRecommender.d.ts","sourceRoot":"","sources":["../../src/utils/elementChainRecommender.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAKD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,CAYvE;AAED,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,sBAA2B,GACnC,UAAU,CAmBZ"}
+{"version":3,"file":"elementChainRecommender.d.ts","sourceRoot":"","sources":["../../src/utils/elementChainRecommender.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAKD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,CAYvE;AAED,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAsBD,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,sBAA2B,GACnC,UAAU,CAmBZ"}

package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js

@@ -34,7 +34,23 @@ export function findRecommendedIndex(elements) {
 /**
  * Build a PostHog action step from a selected element in the chain.
  * Does NOT include `selector` — it's not supported in Athena.
+ *
+ * The `url` field stores the PATHNAME of the page where the user clicked,
+ * not the full URL. This matches how the backend generates SQL:
+ *   step.url → `pathname LIKE '%<url>%'`
+ * Storing the full URL (including the editor token / query string) makes
+ * the stored KPI data ugly, leaks editor tokens into saved configs, and
+ * forces the backend to re-parse on every query. Strip at the boundary.
  */
+function pageUrlToPathname(pageUrl) {
+    try {
+        const u = new URL(pageUrl);
+        return u.pathname || pageUrl;
+    }
+    catch {
+        return pageUrl;
+    }
+}
 export function buildActionStepFromElement(element, pageUrl, options = {}) {
     const { inferPageview = false } = options;
     const href = element.attr__href;
@@ -42,7 +58,7 @@ export function buildActionStepFromElement(element, pageUrl, options = {}) {
     const step = {
         event: inferPageview && isInternalLink ? '$pageview' : '$autocapture',
         tag_name: element.tag_name,
-        url: pageUrl,
+        url: pageUrlToPathname(pageUrl),
     };
     const text = (element.$el_text || '').trim();
     if (text) {

package/node_modules/@syntrologie/shared-editor-ui/package.json

@@ -12,6 +12,10 @@
       "types": "./src/index.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./lit-elements": {
+      "types": "./src/lit-elements.ts",
+      "import": "./src/lit-elements.ts"
     }
   },
   "files": [
@@ -25,7 +29,9 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "css-selector-generator": "3.8.0"
+    "@syntro/design-system": "*",
+    "css-selector-generator": "3.8.0",
+    "lit": "3.3.2"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
@@ -33,6 +39,8 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@open-wc/testing": "4.0.0",
+    "@open-wc/testing-helpers": "3.0.1",
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.14",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntrologie/adapt-nav",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "description": "Adaptive Navigation - Nav link widget, scroll-to and page navigation actions",
   "license": "Proprietary",
   "private": false,
@@ -19,6 +19,10 @@
       "types": "./dist/runtime.d.ts",
       "import": "./dist/runtime.js"
     },
+    "./runtime-lit": {
+      "types": "./src/runtime-lit.ts",
+      "import": "./src/runtime-lit.ts"
+    },
     "./schema": {
       "types": "./dist/schema.d.ts",
       "import": "./dist/schema.js"
@@ -26,6 +30,10 @@
     "./editor": {
       "types": "./dist/editor.d.ts",
       "import": "./dist/editor.js"
+    },
+    "./editor-lit": {
+      "types": "./src/editor-lit.ts",
+      "import": "./src/editor-lit.ts"
     }
   },
   "files": [
@@ -55,7 +63,10 @@
     "@syntro/design-system": "*"
   },
   "devDependencies": {
+    "@open-wc/testing": "4.0.0",
+    "@open-wc/testing-helpers": "3.0.1",
     "@types/react": "19.2.14",
+    "lit": "3.3.2",
     "typescript": "5.9.3",
     "zod": "3.25.76",
     "@testing-library/react": "16.3.2",