@syntrologie/adapt-nav 2.4.1 → 2.5.1

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

@@ -99,7 +99,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
             position: 'fixed',
             inset: 0,
             cursor: 'crosshair',
-            zIndex: 2147483647,
+            zIndex: 2147483644,
         }, children: [_jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,

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

@@ -1,7 +1,7 @@
 /**
- * ConditionStatusLine — inline showWhen diagnostic on EditorCard.
+ * ConditionStatusLine — inline triggerWhen diagnostic on EditorCard.
  *
- * Shows a compact one-line status for items with showWhen conditions.
+ * Shows a compact one-line status for items with triggerWhen conditions.
  * Click to expand per-condition detail.
  */
 import type { FormattedCondition } from '../formatConditionLabel';
@@ -10,13 +10,13 @@ export interface ConditionStatus {
     passed: boolean;
     formatted: FormattedCondition;
 }
-export interface ShowWhenStatus {
+export interface TriggerWhenStatus {
     visible: boolean;
     isFallback: boolean;
     conditions: ConditionStatus[];
 }
 interface ConditionStatusLineProps {
-    status: ShowWhenStatus | null;
+    status: TriggerWhenStatus | null;
 }
 export declare function ConditionStatusLine({ status }: ConditionStatusLineProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"ConditionStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/ConditionStatusLine.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AA6CD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,wBAAwB,kDAiEvE"}
+{"version":3,"file":"ConditionStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/ConditionStatusLine.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAClC;AA6CD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,wBAAwB,kDAiEvE"}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * ConditionStatusLine — inline showWhen diagnostic on EditorCard.
+ * ConditionStatusLine — inline triggerWhen diagnostic on EditorCard.
  *
- * Shows a compact one-line status for items with showWhen conditions.
+ * Shows a compact one-line status for items with triggerWhen conditions.
  * Click to expand per-condition detail.
  */
 import { Check, Clock, X } from 'lucide-react';

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

@@ -1,6 +1,7 @@
 interface DetectionBadgeProps {
     found: boolean;
+    onClick?: (e: React.MouseEvent) => void;
 }
-export declare function DetectionBadge({ found }: DetectionBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetectionBadge({ found, onClick }: DetectionBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DetectionBadge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DetectionBadge.d.ts","sourceRoot":"","sources":["../../src/components/DetectionBadge.tsx"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,2CAU5D"}
+{"version":3,"file":"DetectionBadge.d.ts","sourceRoot":"","sources":["../../src/components/DetectionBadge.tsx"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CA6CrE"}

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

@@ -1,5 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../cn';
-export function DetectionBadge({ found }) {
-    return (_jsx("span", { className: cn('se-w-2 se-h-2 se-rounded-full se-shrink-0 se-inline-block', found ? 'se-bg-green-4' : 'se-bg-text-tertiary'), title: found ? 'Found on this page' : 'Not found on this page' }));
+export function DetectionBadge({ found, onClick }) {
+    const title = onClick
+        ? found
+            ? 'Click to scroll to element'
+            : 'Click to navigate to page'
+        : found
+            ? 'Found on this page'
+            : 'Not found on this page';
+    const textColor = found ? 'se-text-green-4' : 'se-text-text-tertiary';
+    const dotColor = found ? 'se-bg-green-4' : 'se-bg-text-tertiary';
+    const classes = cn('se-inline-flex se-items-center se-gap-1 se-text-xs se-font-medium se-shrink-0', textColor, onClick && 'se-cursor-pointer hover:se-opacity-80');
+    const dot = (_jsx("span", { "data-indicator": "", className: cn('se-w-1.5 se-h-1.5 se-rounded-full', dotColor) }));
+    if (onClick) {
+        return (_jsxs("button", { type: "button", className: cn(classes, 'se-border-none se-bg-transparent se-p-0'), title: title, onClick: (e) => {
+                e.stopPropagation();
+                onClick(e);
+            }, children: [dot, "GoTo"] }));
+    }
+    return (_jsxs("span", { className: classes, title: title, children: [dot, "GoTo"] }));
 }

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

@@ -1,23 +1,25 @@
 /**
- * EditorPanelShell — shared wrapper for all editor sidebars (editor, audit, review).
+ * EditorPanelShell — moveable, resizable wrapper for editor sidebars.
  *
  * Renders:
- *  1. A draggable FAB (56×56 circle) portaled to document.body — always visible.
- *     Pitch black with the Syntrologie logo mark. Draggable to any screen edge.
- *  2. A fixed-position panel container with semi-transparent background
- *     and backdrop blur, rendered only when `isOpen`.
+ *  1. A fixed FAB button (Syntrologie logo) at the panel's bottom-left corner.
+ *     Click toggles open/minimized. Drag moves the entire panel.
+ *  2. A resizable panel container with semi-transparent background and backdrop blur.
+ *     Supports docked (left/right edge, full height) and free-floating modes.
+ *     Position, size, and dock state persist in localStorage.
  */
 import type React from 'react';
 export interface EditorPanelShellProps {
     isOpen: boolean;
     onToggle: () => void;
+    /** @deprecated Panel manages its own position. Kept for backwards compat. */
     position?: 'left' | 'right';
     panelId?: string;
-    /** Panel z-index (default 2147483647). ModularEditorPanel passes 10000. */
+    /** Panel z-index (default 2147483647). ModularEditorPanel passes 2147483647. */
     zIndex?: number;
-    /** Portal target for the FAB button. Defaults to document.body when omitted. */
+    /** @deprecated FAB no longer portals separately. Kept for backwards compat. */
     portalTarget?: HTMLElement;
     children: React.ReactNode;
 }
-export declare function EditorPanelShell({ isOpen, onToggle, position, panelId, zIndex, portalTarget, children, }: EditorPanelShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorPanelShell({ isOpen, onToggle, panelId, zIndex, children, }: EditorPanelShellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorPanelShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorPanelShell.d.ts","sourceRoot":"","sources":["../../src/components/EditorPanelShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAyKD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,QAAkB,EAClB,OAAO,EACP,MAAmB,EACnB,YAAY,EACZ,QAAQ,GACT,EAAE,qBAAqB,2CA0CvB"}
+{"version":3,"file":"EditorPanelShell.d.ts","sourceRoot":"","sources":["../../src/components/EditorPanelShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA8MD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAmB,EACnB,QAAQ,GACT,EAAE,qBAAqB,2CAySvB"}

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

@@ -1,116 +1,379 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { cn } from '../cn';
 // =============================================================================
+// Constants
+// =============================================================================
+const STORAGE_KEY = 'syntro:editor-panel';
+const MIN_WIDTH = 480;
+const MIN_HEIGHT = 400;
+const FAB_SIZE = 56;
+const FAB_INSET = 12;
+const SNAP_THRESHOLD = 20;
+const DRAG_THRESHOLD = 5;
+const HANDLE_SIZE = 8;
+// =============================================================================
 // Logo
 // =============================================================================
-/**
- * Syntrologie logo mark — from Figma design system.
- * Rendered as inline SVG to avoid CSP issues with data: URIs on injected pages.
- */
+/** Syntrologie logo mark — inline SVG to avoid CSP issues. */
 function SyntroLogo() {
     return (_jsxs("svg", { "aria-hidden": "true", width: "28", height: "18", viewBox: "0 0 101 63", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#syntro-fab-clip)", children: _jsx("path", { d: "M51.989 0.284C52.386 0.29 52.808 0.341 53.192 0.443C53.769 0.596 54.362 0.983 54.745 1.442C55.895 2.822 56.767 4.782 57.669 6.357C59.947 10.334 62.152 14.372 64.498 18.307C64.671 18.597 65.127 19.343 65.475 19.411C66.654 19.641 79.278 11.523 81.123 10.317C80.704 8.6 80.624 7.21 81.334 5.525C82.014 3.916 83.317 2.651 84.946 2.019C86.593 1.366 88.286 1.42 89.902 2.123C91.486 2.795 92.733 4.076 93.363 5.677C95.111 10.218 91.347 15.013 86.561 14.442C85.392 14.302 84.649 13.927 83.6 13.441C76.542 18.247 69.094 22.597 61.207 25.907C60.153 26.349 59.42 26.6 58.519 27.328C60.583 27.43 87.034 24.236 87.878 23.781C87.926 23.755 88.048 23.697 88.08 23.652C88.244 23.421 88.277 23.007 88.376 22.735C88.819 21.511 89.563 20.379 90.604 19.586C91.887 18.608 93.6 18.093 95.208 18.324C96.992 18.581 98.67 19.55 99.74 21.005C100.733 22.364 101.141 24.064 100.875 25.726C100.607 27.394 99.692 28.888 98.329 29.887C96.02 31.573 92.641 31.613 90.392 29.789C89.579 29.13 89.177 28.535 88.566 27.692C86.692 28.103 83.447 28.463 81.472 28.73C76.577 29.399 71.671 29.99 66.756 30.504C65.752 30.608 59.279 31.013 58.779 31.24L58.781 31.387C59.106 31.577 66.974 33.025 68.328 33.358C72.475 34.405 76.572 35.64 80.606 37.06C82.709 37.818 84.721 38.686 86.814 39.457C88.505 38.051 89.243 36.875 91.925 36.841C93.665 36.833 95.339 37.506 96.589 38.717C97.986 40.087 98.415 41.541 98.429 43.422C98.417 44.842 98.099 45.978 97.229 47.137C96.168 48.531 94.597 49.447 92.86 49.682C91.161 49.922 89.437 49.472 88.073 48.431C86.201 47.02 85.795 45.462 85.488 43.323C85.255 43.193 85.018 43.071 84.776 42.958C83.907 42.553 78.511 40.359 77.911 40.577C77.837 41.147 78.926 42.592 79.243 43.155L84.336 52.073C85.165 53.529 86.027 54.991 86.789 56.483C87.253 57.391 87.414 58.355 87.056 59.343C86.557 60.722 85.014 61.408 83.626 61.438C81.429 61.427 79.228 61.427 77.029 61.427L62.967 61.427L35.549 61.435C33.337 61.436 20.693 61.626 19.579 61.199C18.758 60.889 18.093 60.265 17.732 59.465C17.455 58.844 17.335 57.994 17.577 57.361C18.242 55.623 19.5 53.659 20.438 52.043L28.119 39.028C28.9 37.701 31.213 33.891 31.7 32.634C25.671 32.936 18.736 32.547 12.6 32.721C11.75 34.138 10.992 35.281 9.368 35.935C7.744 36.588 5.704 36.604 4.097 35.922C2.546 35.272 1.319 34.028 0.69 32.468C0.053 30.839 0.086 29.025 0.781 27.42C2.812 22.739 9.259 22.202 12.05 26.464C12.555 27.235 12.774 27.84 13.104 28.703L26.462 28.711C28.926 28.713 31.729 28.779 34.17 28.668C35.279 26.892 36.442 24.733 37.515 22.901L45.376 9.375C46.797 6.902 48.214 4.368 49.685 1.924C50.222 1.032 50.962 0.493 51.989 0.284ZM22.119 57.31C23.512 57.503 26.045 57.431 27.526 57.429L36.661 57.42L68.412 57.422C73.113 57.421 77.994 57.351 82.68 57.438L75.664 45.098C74.562 43.171 73.093 40.773 72.104 38.827C71.245 38.351 70.291 38.109 69.335 37.848C59.189 35.076 48.669 33.421 38.172 32.796C37.642 32.764 36.994 32.766 36.469 32.794L25.855 50.865C24.634 52.935 23.364 55.302 22.119 57.31ZM52.216 5.513C49.384 10.611 46.473 15.665 43.484 20.673C42.193 22.878 40.862 25.071 39.63 27.31C39.46 27.618 39.36 27.782 39.453 28.133C40.522 28.342 45.866 26.973 47.112 26.644C49.169 26.137 60.135 22.684 61.174 21.436C61.248 21.163 61.287 21.069 61.125 20.762C60.279 19.163 59.326 17.527 58.435 15.958L53.592 7.329C53.355 6.915 52.677 5.599 52.216 5.513ZM96.18 26.494C96.963 25.713 97.12 24.502 96.563 23.547C96.005 22.592 94.872 22.133 93.807 22.432C92.972 22.666 92.324 23.327 92.108 24.167C91.892 25.007 92.14 25.899 92.758 26.507C93.396 27.134 94.327 27.361 95.182 27.096C95.558 26.98 95.901 26.773 96.18 26.494ZM87.871 10.399C89.147 10.087 89.941 8.813 89.659 7.529C89.377 6.246 88.122 5.422 86.832 5.673C85.97 5.841 85.266 6.463 84.994 7.298C84.722 8.133 84.923 9.05 85.52 9.694C86.118 10.339 87.017 10.608 87.871 10.399ZM91.505 40.879C90.185 41.122 89.31 42.388 89.55 43.709C89.791 45.03 91.055 45.907 92.377 45.669C93.22 45.517 93.921 44.933 94.223 44.131C94.525 43.329 94.383 42.428 93.85 41.758C93.29 41.055 92.389 40.717 91.505 40.879ZM9.138 29.557C9.005 28.88 8.592 28.292 8.001 27.937C7.409 27.583 6.696 27.495 6.036 27.697C5.665 27.81 5.326 28.011 5.048 28.282C4.24 29.07 4.079 30.31 4.66 31.278C5.241 32.247 6.411 32.688 7.487 32.346C8.666 31.97 9.376 30.771 9.138 29.557Z", fill: "currentColor" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "syntro-fab-clip", children: _jsx("rect", { width: "101", height: "63", fill: "white" }) }) })] }));
 }
 // =============================================================================
-// Draggable FAB
+// Geometry Helpers
 // =============================================================================
-const FAB_SIZE = 56;
-const DRAG_THRESHOLD = 5; // px movement before we consider it a drag
-function DraggableFab({ isOpen, onToggle, initialRight, zIndex, portalTarget }) {
-    // Position state — bottom-right or bottom-left by default
-    const [pos, setPos] = useState({
-        x: initialRight ? window.innerWidth - FAB_SIZE - 40 : 40,
-        y: window.innerHeight - FAB_SIZE - 40,
-    });
-    // Drag tracking refs (non-reactive for perf)
-    const dragging = useRef(false);
+function getDefaultGeometry() {
+    return {
+        x: 0,
+        y: 0,
+        width: MIN_WIDTH,
+        height: typeof window !== 'undefined' ? window.innerHeight : 800,
+        docked: 'left',
+    };
+}
+function loadGeometry(storageKey) {
+    if (typeof window === 'undefined')
+        return getDefaultGeometry();
+    try {
+        const raw = localStorage.getItem(storageKey);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            return {
+                x: typeof parsed.x === 'number' ? parsed.x : 0,
+                y: typeof parsed.y === 'number' ? parsed.y : 0,
+                width: Math.max(MIN_WIDTH, typeof parsed.width === 'number' ? parsed.width : MIN_WIDTH),
+                height: Math.max(MIN_HEIGHT, typeof parsed.height === 'number' ? parsed.height : window.innerHeight),
+                docked: parsed.docked === 'left' || parsed.docked === 'right' ? parsed.docked : null,
+            };
+        }
+    }
+    catch {
+        /* ignore corrupt localStorage */
+    }
+    return getDefaultGeometry();
+}
+function saveGeometry(storageKey, geo) {
+    try {
+        localStorage.setItem(storageKey, JSON.stringify(geo));
+    }
+    catch {
+        /* ignore full localStorage */
+    }
+}
+/** Compute the panel's actual pixel rect (resolving docked positions). */
+function getPanelRect(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 };
+}
+/** Compute FAB position from panel geometry (top-left of panel). */
+function getFabPosition(geo) {
+    const rect = getPanelRect(geo);
+    return {
+        left: rect.left + FAB_INSET,
+        top: rect.top + FAB_INSET,
+    };
+}
+/** Clamp geometry so the FAB (top-left) remains visible. */
+function clampToViewport(geo) {
+    if (geo.docked)
+        return geo;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    return {
+        ...geo,
+        x: Math.max(-(geo.width - FAB_SIZE), Math.min(geo.x, vw - FAB_SIZE)),
+        y: Math.max(-FAB_INSET, Math.min(geo.y, vh - FAB_SIZE - FAB_INSET)),
+    };
+}
+/** Convert docked geometry to undocked pixel coordinates. */
+function undockGeometry(geo) {
+    const rect = getPanelRect(geo);
+    return {
+        x: rect.left,
+        y: rect.top,
+        width: geo.width,
+        height: rect.height,
+        docked: null,
+    };
+}
+// =============================================================================
+// Resize Handle Definitions
+// =============================================================================
+const RESIZE_HANDLES = [
+    {
+        dir: 'n',
+        style: { top: 0, left: HANDLE_SIZE, right: HANDLE_SIZE, height: HANDLE_SIZE },
+        cursor: 'ns-resize',
+    },
+    {
+        dir: 's',
+        style: { bottom: 0, left: HANDLE_SIZE, right: HANDLE_SIZE, height: HANDLE_SIZE },
+        cursor: 'ns-resize',
+    },
+    {
+        dir: 'e',
+        style: { right: 0, top: HANDLE_SIZE, bottom: HANDLE_SIZE, width: HANDLE_SIZE },
+        cursor: 'ew-resize',
+    },
+    {
+        dir: 'w',
+        style: { left: 0, top: HANDLE_SIZE, bottom: HANDLE_SIZE, width: HANDLE_SIZE },
+        cursor: 'ew-resize',
+    },
+    {
+        dir: 'ne',
+        style: { top: 0, right: 0, width: HANDLE_SIZE * 2, height: HANDLE_SIZE * 2 },
+        cursor: 'nesw-resize',
+    },
+    {
+        dir: 'nw',
+        style: { top: 0, left: 0, width: HANDLE_SIZE * 2, height: HANDLE_SIZE * 2 },
+        cursor: 'nwse-resize',
+    },
+    {
+        dir: 'se',
+        style: { bottom: 0, right: 0, width: HANDLE_SIZE * 2, height: HANDLE_SIZE * 2 },
+        cursor: 'nwse-resize',
+    },
+    {
+        dir: 'sw',
+        style: { bottom: 0, left: 0, width: HANDLE_SIZE * 2, height: HANDLE_SIZE * 2 },
+        cursor: 'nesw-resize',
+    },
+];
+// =============================================================================
+// Component
+// =============================================================================
+export function EditorPanelShell({ isOpen, onToggle, panelId, zIndex = 2147483647, children, }) {
+    const storageKey = panelId ? `syntro:editor-panel:${panelId}` : STORAGE_KEY;
+    const [geometry, setGeometry] = useState(() => loadGeometry(storageKey));
+    const geoRef = useRef(geometry);
+    geoRef.current = geometry;
+    const panelRef = useRef(null);
+    const fabRef = useRef(null);
+    // Drag state (refs for performance — no re-renders during drag)
+    const isDragging = useRef(false);
     const hasMoved = useRef(false);
-    const offset = useRef({ x: 0, y: 0 });
-    const posRef = useRef(pos);
-    posRef.current = pos;
-    // Keep FAB within viewport on resize
+    const dragOffset = useRef({ x: 0, y: 0 });
+    const startPanelPos = useRef({ x: 0, y: 0 });
+    const pendingGeo = useRef(null);
+    // Resize state
+    const activeResize = useRef(null);
+    const resizeStartMouse = useRef({ x: 0, y: 0 });
+    const resizeStartGeo = useRef(getDefaultGeometry());
+    // Persist geometry on change
     useEffect(() => {
-        const handleResize = () => {
-            setPos((prev) => ({
-                x: Math.min(prev.x, window.innerWidth - FAB_SIZE),
-                y: Math.min(prev.y, window.innerHeight - FAB_SIZE),
-            }));
-        };
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+        saveGeometry(storageKey, geometry);
+    }, [storageKey, geometry]);
+    // Viewport clamping on window resize
+    useEffect(() => {
+        const handler = () => setGeometry((prev) => clampToViewport(prev));
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
     }, []);
-    const handlePointerDown = useCallback((e) => {
-        dragging.current = true;
+    // ---- FAB DRAG HANDLERS ----
+    const handleFabPointerDown = useCallback((e) => {
+        isDragging.current = true;
         hasMoved.current = false;
-        offset.current = {
-            x: e.clientX - posRef.current.x,
-            y: e.clientY - posRef.current.y,
+        const rect = getPanelRect(geoRef.current);
+        startPanelPos.current = { x: rect.left, y: rect.top };
+        dragOffset.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
         };
         e.target.setPointerCapture(e.pointerId);
         e.preventDefault();
     }, []);
-    const handlePointerMove = useCallback((e) => {
-        if (!dragging.current)
+    const handleFabPointerMove = useCallback((e) => {
+        if (!isDragging.current)
             return;
-        const newX = e.clientX - offset.current.x;
-        const newY = e.clientY - offset.current.y;
-        // Check if we've moved past the threshold
-        const dx = Math.abs(newX - posRef.current.x);
-        const dy = Math.abs(newY - posRef.current.y);
-        if (!hasMoved.current && dx < DRAG_THRESHOLD && dy < DRAG_THRESHOLD)
-            return;
-        hasMoved.current = true;
-        setPos({
-            x: Math.max(0, Math.min(newX, window.innerWidth - FAB_SIZE)),
-            y: Math.max(0, Math.min(newY, window.innerHeight - FAB_SIZE)),
-        });
+        const newX = e.clientX - dragOffset.current.x;
+        const newY = e.clientY - dragOffset.current.y;
+        if (!hasMoved.current) {
+            const dx = Math.abs(newX - startPanelPos.current.x);
+            const dy = Math.abs(newY - startPanelPos.current.y);
+            if (dx < DRAG_THRESHOLD && dy < DRAG_THRESHOLD)
+                return;
+            hasMoved.current = true;
+        }
+        const geo = geoRef.current;
+        const height = geo.docked ? window.innerHeight : geo.height;
+        // Update panel DOM directly for performance (bypass React re-render)
+        if (panelRef.current) {
+            panelRef.current.style.left = `${newX}px`;
+            panelRef.current.style.top = `${newY}px`;
+            panelRef.current.style.right = 'auto';
+            panelRef.current.style.height = `${height}px`;
+        }
+        if (fabRef.current) {
+            fabRef.current.style.left = `${newX + FAB_INSET}px`;
+            fabRef.current.style.top = `${newY + FAB_INSET}px`;
+        }
+        pendingGeo.current = { x: newX, y: newY, width: geo.width, height, docked: null };
     }, []);
-    const handlePointerUp = useCallback((e) => {
+    const handleFabPointerUp = useCallback((e) => {
         e.target.releasePointerCapture(e.pointerId);
         const wasDragging = hasMoved.current;
-        dragging.current = false;
+        isDragging.current = false;
         hasMoved.current = false;
-        // Only toggle if it was a click, not a drag
         if (!wasDragging) {
             onToggle();
+            return;
+        }
+        if (pendingGeo.current) {
+            const geo = pendingGeo.current;
+            // Edge snapping
+            if (geo.x <= SNAP_THRESHOLD) {
+                setGeometry({ ...geo, docked: 'left', x: 0, y: 0 });
+            }
+            else if (geo.x + geo.width >= window.innerWidth - SNAP_THRESHOLD) {
+                setGeometry({ ...geo, docked: 'right', x: 0, y: 0 });
+            }
+            else {
+                setGeometry(geo);
+            }
+            pendingGeo.current = null;
         }
     }, [onToggle]);
-    return createPortal(_jsx("div", { className: "syntro-editor-scope", "data-syntro-editor-ui": "fab-wrapper", style: { display: 'contents' }, children: _jsx("button", { type: "button", "data-syntro-fab": true, "data-syntro-editor-ui": "fab", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, style: {
-                position: 'fixed',
-                left: pos.x,
-                top: pos.y,
-                zIndex,
-                width: FAB_SIZE,
-                height: FAB_SIZE,
-                borderRadius: '50%',
-                border: '2px solid #b72e2a',
-                cursor: dragging.current ? 'grabbing' : 'grab',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: '#000000',
-                color: '#ffffff',
-                boxShadow: isOpen
-                    ? '0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)'
-                    : '0 4px 24px rgba(0,0,0,0.6)',
-                transition: 'box-shadow 150ms ease',
-                touchAction: 'none',
-                userSelect: 'none',
-                WebkitUserSelect: 'none',
-            }, title: isOpen ? 'Close panel' : 'Open panel', children: _jsx(SyntroLogo, {}) }) }), portalTarget);
-}
-// =============================================================================
-// Component
-// =============================================================================
-export function EditorPanelShell({ isOpen, onToggle, position = 'right', panelId, zIndex = 2147483647, portalTarget, children, }) {
-    const isRight = position === 'right';
-    const resolvedPortalTarget = portalTarget ?? (typeof document !== 'undefined' ? document.body : null);
-    return (_jsxs(_Fragment, { children: [resolvedPortalTarget && (_jsx(DraggableFab, { isOpen: isOpen, onToggle: onToggle, initialRight: isRight, zIndex: zIndex + 1, portalTarget: resolvedPortalTarget })), isOpen && (_jsx("div", { ...(panelId ? { id: panelId } : {}), "data-syntro-editor-panel": true, "data-syntro-editor-ui": "panel", className: cn('syntro-editor-scope se-fixed se-top-0 se-w-[390px] se-h-screen se-flex se-flex-col se-text-text-primary se-backdrop-blur-xl se-font-sans se-antialiased', isRight
-                    ? 'se-right-0 se-border-l se-border-border-primary'
-                    : 'se-left-0 se-border-r se-border-border-primary'), style: {
-                    zIndex,
-                    background: 'linear-gradient(160deg, rgba(7,8,10,0.84) 0%, rgba(14,17,20,0.88) 45%, rgba(15,19,24,0.84) 100%)',
-                    boxShadow: isRight ? '-20px 0 60px rgba(0,0,0,0.5)' : '20px 0 60px rgba(0,0,0,0.5)',
-                }, children: children }))] }));
+    // ---- RESIZE HANDLERS ----
+    const handleResizePointerDown = useCallback((e) => {
+        const dir = e.currentTarget.dataset.resizeDir;
+        if (!dir)
+            return;
+        let geo = geoRef.current;
+        // Undock if currently docked
+        if (geo.docked) {
+            geo = undockGeometry(geo);
+            geoRef.current = geo;
+            setGeometry(geo);
+        }
+        activeResize.current = dir;
+        resizeStartMouse.current = { x: e.clientX, y: e.clientY };
+        resizeStartGeo.current = { ...geo };
+        e.target.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    }, []);
+    const handleResizePointerMove = useCallback((e) => {
+        if (!activeResize.current)
+            return;
+        const dx = e.clientX - resizeStartMouse.current.x;
+        const dy = e.clientY - resizeStartMouse.current.y;
+        const dir = activeResize.current;
+        const start = resizeStartGeo.current;
+        let { x, y, width, height } = start;
+        if (dir.includes('e'))
+            width = Math.max(MIN_WIDTH, start.width + dx);
+        if (dir.includes('w')) {
+            const newW = Math.max(MIN_WIDTH, start.width - dx);
+            x = start.x + start.width - newW;
+            width = newW;
+        }
+        if (dir.includes('s'))
+            height = Math.max(MIN_HEIGHT, start.height + dy);
+        if (dir.includes('n')) {
+            const newH = Math.max(MIN_HEIGHT, start.height - dy);
+            y = start.y + start.height - newH;
+            height = newH;
+        }
+        // Update DOM directly for performance
+        if (panelRef.current) {
+            panelRef.current.style.left = `${x}px`;
+            panelRef.current.style.top = `${y}px`;
+            panelRef.current.style.width = `${width}px`;
+            panelRef.current.style.height = `${height}px`;
+        }
+        if (fabRef.current) {
+            fabRef.current.style.left = `${x + FAB_INSET}px`;
+            fabRef.current.style.top = `${y + FAB_INSET}px`;
+        }
+        pendingGeo.current = { x, y, width, height, docked: null };
+    }, []);
+    const handleResizePointerUp = useCallback((e) => {
+        e.target.releasePointerCapture(e.pointerId);
+        activeResize.current = null;
+        if (pendingGeo.current) {
+            setGeometry(pendingGeo.current);
+            pendingGeo.current = null;
+        }
+    }, []);
+    // ---- COMPUTED STYLES ----
+    const isDocked = geometry.docked !== null;
+    const fabPos = getFabPosition(geometry);
+    const panelStyle = {
+        position: 'fixed',
+        zIndex,
+        background: 'linear-gradient(160deg, rgba(7,8,10,0.84) 0%, rgba(14,17,20,0.88) 45%, rgba(15,19,24,0.84) 100%)',
+        boxShadow: isDocked
+            ? geometry.docked === 'right'
+                ? '-20px 0 60px rgba(0,0,0,0.5)'
+                : '20px 0 60px rgba(0,0,0,0.5)'
+            : '0 8px 60px rgba(0,0,0,0.5)',
+        // Prevent wheel scroll from chaining to the page behind the panel.
+        // overflow-y: auto makes this a scroll container so overscroll-behavior applies.
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+    };
+    if (geometry.docked === 'left') {
+        panelStyle.top = 0;
+        panelStyle.left = 0;
+        panelStyle.width = geometry.width;
+        panelStyle.height = '100vh';
+    }
+    else if (geometry.docked === 'right') {
+        panelStyle.top = 0;
+        panelStyle.right = 0;
+        panelStyle.width = geometry.width;
+        panelStyle.height = '100vh';
+    }
+    else {
+        panelStyle.top = geometry.y;
+        panelStyle.left = geometry.x;
+        panelStyle.width = geometry.width;
+        panelStyle.height = geometry.height;
+    }
+    const fabStyle = {
+        position: 'fixed',
+        left: fabPos.left,
+        top: fabPos.top,
+        zIndex,
+        width: FAB_SIZE,
+        height: FAB_SIZE,
+        borderRadius: '50%',
+        border: '2px solid #b72e2a',
+        cursor: 'grab',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#000000',
+        color: '#ffffff',
+        boxShadow: isOpen
+            ? '0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)'
+            : '0 4px 24px rgba(0,0,0,0.6)',
+        transition: 'box-shadow 150ms ease',
+        touchAction: 'none',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+    };
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsxs("div", { ref: panelRef, ...(panelId ? { id: panelId } : {}), "data-syntro-editor-panel": true, "data-syntro-editor-ui": "panel", className: cn('syntro-editor-scope se-fixed se-flex se-flex-col se-text-text-primary se-backdrop-blur-xl se-font-sans se-antialiased se-overflow-hidden', isDocked
+                    ? geometry.docked === 'right'
+                        ? 'se-border-l se-border-border-primary'
+                        : 'se-border-r se-border-border-primary'
+                    : 'se-rounded-lg se-border se-border-border-primary'), style: panelStyle, children: [RESIZE_HANDLES.map(({ dir, style, cursor }) => (_jsx("div", { "data-syntro-editor-ui": `resize-${dir}`, "data-resize-dir": dir, onPointerDown: handleResizePointerDown, onPointerMove: handleResizePointerMove, onPointerUp: handleResizePointerUp, style: {
+                            position: 'absolute',
+                            ...style,
+                            cursor,
+                            zIndex: 1,
+                            touchAction: 'none',
+                        } }, dir))), children] })), _jsx("div", { className: "syntro-editor-scope", "data-syntro-editor-ui": "fab-wrapper", style: { display: 'contents' }, children: _jsx("button", { ref: fabRef, type: "button", "data-syntro-fab": true, "data-syntro-editor-ui": "fab", onPointerDown: handleFabPointerDown, onPointerMove: handleFabPointerMove, onPointerUp: handleFabPointerUp, style: fabStyle, title: isOpen ? 'Minimize panel' : 'Open panel', children: _jsx(SyntroLogo, {}) }) })] }));
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { useElementRect } from '../hooks/useElementRect';
-export function ElementHighlight({ element, color, bgColor = 'transparent', borderStyle = 'solid', borderWidth = 2, label, labelIcon, showRemove, onRemove, onClick, zIndex = 2147483646, padding = 2, showDimensions, className, }) {
+export function ElementHighlight({ element, color, bgColor = 'transparent', borderStyle = 'solid', borderWidth = 2, label, labelIcon, showRemove, onRemove, onClick, zIndex = 2147483644, padding = 2, showDimensions, className, }) {
     const rect = useElementRect(element);
     if (!rect)
         return null;

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

@@ -1,12 +1,12 @@
 /**
- * TriggerJourney — compact horizontal node graph for showWhen conditions.
+ * TriggerJourney — compact horizontal node graph for triggerWhen conditions.
  *
  * Displays each condition as a small circle node connected by lines.
  * Nodes light up green as conditions are met.
  */
-import type { ShowWhenStatus } from './ConditionStatusLine';
+import type { TriggerWhenStatus } from './ConditionStatusLine';
 export interface TriggerJourneyProps {
-    status: ShowWhenStatus | null;
+    status: TriggerWhenStatus | null;
 }
 export declare function TriggerJourney({ status }: TriggerJourneyProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TriggerJourney.d.ts.map