@syntrologie/adapt-nav 2.16.0 → 2.17.0

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

@@ -1,481 +0,0 @@
-/**
- * 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 + rect.height - this.opts.fabSize - 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 + height - this.opts.fabSize - this.opts.fabInset}px`;
-        }
-    }
-    _clampToViewport(geo) {
-        if (geo.docked)
-            return geo;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        // FAB sits at panel's bottom-left: fabTop = geo.y + geo.height - fabSize - fabInset.
-        // Keep fabTop in [0, vh - fabSize] so the FAB stays on-screen even if the panel
-        // extends above the viewport top or below the viewport bottom.
-        const minY = this.opts.fabSize + this.opts.fabInset - geo.height;
-        const maxY = vh - geo.height + this.opts.fabInset;
-        return {
-            ...geo,
-            x: Math.max(-(geo.width - this.opts.fabSize), Math.min(geo.x, vw - this.opts.fabSize)),
-            y: Math.max(minY, Math.min(geo.y, maxY)),
-        };
-    }
-    _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/formatConditionLabel.d.ts

@@ -1,26 +0,0 @@
-/**
- * Format a triggerWhen condition into a human-readable label.
- * Pure function — no runtime dependency.
- */
-interface ConditionLike {
-    type: string;
-    [key: string]: unknown;
-}
-export interface ConditionProgress {
-    current: number;
-    target: number;
-    operator: string;
-}
-export interface FormattedCondition {
-    label: string;
-    instruction: string;
-    shortLabel: string;
-    progress?: ConditionProgress;
-}
-/**
- * Convert a Condition object into a human-readable label.
- * For event_count conditions, also returns progress data.
- */
-export declare function formatConditionLabel(condition: ConditionLike, accumulatorCount?: number): FormattedCondition;
-export {};
-//# sourceMappingURL=formatConditionLabel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"formatConditionLabel.d.ts","sourceRoot":"","sources":["../src/formatConditionLabel.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgDD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAMD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,aAAa,EACxB,gBAAgB,CAAC,EAAE,MAAM,GACxB,kBAAkB,CAoKpB"}