@syntrologie/adapt-content 2.1.0 → 2.2.0-canary.2

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

@@ -0,0 +1,116 @@
+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';
+// =============================================================================
+// Logo
+// =============================================================================
+/**
+ * Syntrologie logo mark — from Figma design system.
+ * Rendered as inline SVG to avoid CSP issues with data: URIs on injected pages.
+ */
+function SyntroLogo() {
+    return (_jsxs("svg", { 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
+// =============================================================================
+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);
+    const hasMoved = useRef(false);
+    const offset = useRef({ x: 0, y: 0 });
+    const posRef = useRef(pos);
+    posRef.current = pos;
+    // Keep FAB within viewport on resize
+    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);
+    }, []);
+    const handlePointerDown = useCallback((e) => {
+        dragging.current = true;
+        hasMoved.current = false;
+        offset.current = {
+            x: e.clientX - posRef.current.x,
+            y: e.clientY - posRef.current.y,
+        };
+        e.target.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    }, []);
+    const handlePointerMove = useCallback((e) => {
+        if (!dragging.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 handlePointerUp = useCallback((e) => {
+        e.target.releasePointerCapture(e.pointerId);
+        const wasDragging = hasMoved.current;
+        dragging.current = false;
+        hasMoved.current = false;
+        // Only toggle if it was a click, not a drag
+        if (!wasDragging) {
+            onToggle();
+        }
+    }, [onToggle]);
+    return createPortal(_jsx("div", { className: "syntro-editor-scope", style: { display: 'contents' }, children: _jsx("button", { "data-syntro-fab": true, 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, 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', 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.78) 0%, rgba(14,17,20,0.82) 45%, rgba(15,19,24,0.78) 100%)',
+                    boxShadow: isRight ? '-20px 0 60px rgba(0,0,0,0.5)' : '20px 0 60px rgba(0,0,0,0.5)',
+                }, children: children }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type React from 'react';
+interface EditorSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    className?: string;
+}
+export declare function EditorSelect({ label, className, children, ...props }: EditorSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSelect.d.ts","sourceRoot":"","sources":["../../src/components/EditorSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAqBvF"}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../cn';
+export function EditorSelect({ label, className, children, ...props }) {
+    return (_jsxs("div", { children: [label && (_jsx("label", { className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("select", { ...props, className: cn('se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-mb-2', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className), children: children })] }));
+}

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

@@ -0,0 +1,8 @@
+import type React from 'react';
+interface EditorTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    className?: string;
+}
+export declare function EditorTextarea({ label, className, value, ...props }: EditorTextareaProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorTextarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorTextarea.d.ts","sourceRoot":"","sources":["../../src/components/EditorTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,mBAAoB,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAgCxF"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cn } from '../cn';
+export function EditorTextarea({ label, className, value, ...props }) {
+    const ref = useRef(null);
+    // Auto-resize to fit content
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }, [value]);
+    return (_jsxs("div", { children: [label && (_jsx("label", { className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("textarea", { ref: ref, value: value, ...props, className: cn('se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-mb-2 se-resize-y se-min-h-[60px] se-max-h-[50vh] se-overflow-y-auto se-box-border', 'placeholder:se-text-input-field-text-placeholder', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className) })] }));
+}

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

@@ -0,0 +1,32 @@
+/**
+ * ElementHighlight — Shared overlay highlight for DOM elements.
+ *
+ * Tracks element position via useElementRect (scroll/resize-aware).
+ * Renders via createPortal to document.body with position: fixed.
+ *
+ * EXCEPTION: This component MUST stay on document.body (not in shadow root).
+ * It tracks and highlights host page elements, and needs same-tree visual
+ * stacking context. Uses inline styles exclusively (no CSS leaking concerns).
+ *
+ * Replaces: InspectHighlight, HighlightOverlay, DiscoveryHighlightOverlay,
+ * ReviewHighlightOverlay.
+ */
+import type React from 'react';
+export interface ElementHighlightProps {
+    element: HTMLElement;
+    color: string;
+    bgColor?: string;
+    borderStyle?: 'solid' | 'dashed';
+    borderWidth?: number;
+    label?: string;
+    labelIcon?: React.ReactNode;
+    showRemove?: boolean;
+    onRemove?: () => void;
+    onClick?: () => void;
+    zIndex?: number;
+    padding?: number;
+    showDimensions?: boolean;
+    className?: string;
+}
+export declare function ElementHighlight({ element, color, bgColor, borderStyle, borderWidth, label, labelIcon, showRemove, onRemove, onClick, zIndex, padding, showDimensions, className, }: ElementHighlightProps): React.ReactPortal | null;
+//# sourceMappingURL=ElementHighlight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ElementHighlight.d.ts","sourceRoot":"","sources":["../../src/components/ElementHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,OAAuB,EACvB,WAAqB,EACrB,WAAe,EACf,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAmB,EACnB,OAAW,EACX,cAAc,EACd,SAAS,GACV,EAAE,qBAAqB,4BAsGvB"}

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

@@ -0,0 +1,75 @@
+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, }) {
+    const rect = useElementRect(element);
+    if (!rect)
+        return null;
+    // Build dimensions label from element metadata
+    const dimensionsLabel = showDimensions
+        ? (() => {
+            const tag = element.tagName.toLowerCase();
+            const id = element.id ? `#${element.id}` : '';
+            const cls = element.className && typeof element.className === 'string'
+                ? `.${element.className.split(' ').filter(Boolean).slice(0, 2).join('.')}`
+                : '';
+            return `${tag}${id}${cls} \u2014 ${Math.round(rect.width)}\u00d7${Math.round(rect.height)}`;
+        })()
+        : null;
+    const displayLabel = label || dimensionsLabel;
+    return createPortal(_jsx("div", { "data-syntro-highlight": true, className: className, onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick?.();
+        }, style: {
+            position: 'fixed',
+            top: rect.top - padding,
+            left: rect.left - padding,
+            width: rect.width + padding * 2,
+            height: rect.height + padding * 2,
+            border: `${borderWidth}px ${borderStyle} ${color}`,
+            backgroundColor: bgColor,
+            borderRadius: '4px',
+            zIndex,
+            pointerEvents: onClick || onRemove ? 'auto' : 'none',
+            cursor: onClick ? 'pointer' : 'default',
+            transition: 'all 0.05s ease-out',
+            boxSizing: 'border-box',
+        }, children: displayLabel && (_jsxs("div", { "data-syntro-highlight-label": true, style: {
+                position: 'absolute',
+                top: '-22px',
+                left: 0,
+                background: showDimensions
+                    ? `${color.replace(')', ',0.85)').replace('rgb(', 'rgba(')}`
+                    : color,
+                color: '#fff',
+                fontSize: showDimensions ? '9px' : '10px',
+                fontWeight: 600,
+                fontFamily: showDimensions ? 'monospace' : 'inherit',
+                padding: '1px 6px',
+                borderRadius: '4px',
+                whiteSpace: 'nowrap',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                pointerEvents: 'auto',
+            }, children: [labelIcon, displayLabel, showRemove && onRemove && (_jsx("button", { "data-syntro-highlight-remove": true, onClick: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onRemove();
+                    }, style: {
+                        background: 'rgba(0,0,0,0.3)',
+                        border: 'none',
+                        color: '#fff',
+                        borderRadius: '50%',
+                        width: '14px',
+                        height: '14px',
+                        fontSize: '10px',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: 0,
+                        lineHeight: 1,
+                    }, children: "\u00D7" }))] })) }), document.body);
+}

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

@@ -0,0 +1,6 @@
+interface EmptyStateProps {
+    message: string;
+}
+export declare function EmptyState({ message }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,2CAMtD"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function EmptyState({ message }) {
+    return (_jsx("div", { className: "se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm", children: message }));
+}

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

@@ -0,0 +1,8 @@
+interface GroupHeaderProps {
+    label: string;
+    count: number;
+    className?: string;
+}
+export declare function GroupHeader({ label, count, className }: GroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GroupHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeader.d.ts","sourceRoot":"","sources":["../../src/components/GroupHeader.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAcxE"}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../cn';
+export function GroupHeader({ label, count, className }) {
+    return (_jsxs("div", { className: cn('se-text-xs se-font-bold se-text-text-primary se-uppercase se-tracking-wide se-py-1 se-pb-2 se-flex se-items-center se-justify-between', className), children: [_jsx("span", { children: label }), _jsx("span", { className: "se-text-xs se-text-text-secondary se-bg-badge-slate-bg se-px-1.5 se-py-0.5 se-rounded-lg", children: count })] }));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * TriggerJourney — compact horizontal node graph for showWhen 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';
+export interface TriggerJourneyProps {
+    status: ShowWhenStatus | null;
+}
+export declare function TriggerJourney({ status }: TriggerJourneyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TriggerJourney.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TriggerJourney.d.ts","sourceRoot":"","sources":["../../src/components/TriggerJourney.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AA4FD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CA6B7D"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TriggerJourney — compact horizontal node graph for showWhen conditions.
+ *
+ * Displays each condition as a small circle node connected by lines.
+ * Nodes light up green as conditions are met.
+ */
+import { Check } from 'lucide-react';
+import { cn } from '../cn';
+/* ------------------------------------------------------------------ */
+/*  Internal: small progress bar for event_count nodes                */
+/* ------------------------------------------------------------------ */
+function ProgressBar({ current, target }) {
+    const pct = Math.min(100, Math.round((current / Math.max(target, 1)) * 100));
+    return (_jsxs("div", { className: "se-flex se-items-center se-gap-0.5", children: [_jsx("span", { className: "se-inline-block se-w-8 se-h-1 se-rounded-full se-bg-white/10", title: `${current}/${target} (${pct}%)`, children: _jsx("span", { className: cn('se-block se-h-full se-rounded-full se-transition-all', pct >= 100 ? 'se-bg-green-4' : 'se-bg-blue-4'), style: { width: `${pct}%` } }) }), _jsxs("span", { className: "se-text-[9px] se-text-text-tertiary", children: [current, "/", target] })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Internal: single journey node with label + optional connection    */
+/* ------------------------------------------------------------------ */
+function JourneyNode({ cs, isLast }) {
+    const hasProgress = !!cs.formatted.progress;
+    const inProgress = !cs.passed && hasProgress && cs.formatted.progress.current > 0;
+    return (_jsxs("div", { className: "se-flex se-items-center se-gap-0", children: [_jsxs("div", { className: "se-flex se-flex-col se-items-center se-min-w-0", children: [_jsx("div", { "data-journey-node": true, "data-passed": cs.passed ? 'true' : 'false', className: cn('se-w-4 se-h-4 se-rounded-full se-border-2 se-flex se-items-center se-justify-center se-shrink-0', cs.passed
+                            ? 'se-bg-green-4 se-border-green-4'
+                            : inProgress
+                                ? 'se-bg-blue-4 se-border-blue-4'
+                                : 'se-bg-transparent se-border-white/20'), children: cs.passed && _jsx(Check, { className: "se-w-2.5 se-h-2.5 se-text-white" }) }), _jsx("span", { className: "se-text-[9px] se-text-text-tertiary se-truncate se-max-w-[60px] se-text-center se-mt-0.5", title: cs.formatted.instruction, children: cs.formatted.shortLabel }), hasProgress && (_jsx(ProgressBar, { current: cs.formatted.progress.current, target: cs.formatted.progress.target }))] }), !isLast && (_jsx("div", { "data-journey-line": true, className: cn('se-h-0.5 se-w-4 se-self-start se-mt-2 se-shrink-0', cs.passed ? 'se-bg-green-4' : 'se-bg-white/10') }))] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Main component                                                    */
+/* ------------------------------------------------------------------ */
+export function TriggerJourney({ status }) {
+    if (!status || status.conditions.length === 0) {
+        return (_jsx("div", { className: "se-mt-1 se-text-[10px] se-text-text-tertiary se-italic", children: "Always Present" }));
+    }
+    const { conditions } = status;
+    const allPassed = conditions.every((c) => c.passed);
+    const isMulti = conditions.length > 1;
+    return (_jsxs("div", { className: "se-mt-1", children: [_jsx("div", { className: "se-flex se-items-start", children: conditions.map((cs, i) => (_jsx(JourneyNode, { cs: cs, isLast: i === conditions.length - 1 }, i))) }), allPassed && isMulti && (_jsxs("div", { className: "se-flex se-items-center se-gap-1 se-mt-1 se-text-[10px] se-text-green-4", children: [_jsx(Check, { className: "se-w-3 se-h-3" }), _jsx("span", { children: "All conditions met" })] }))] }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Format a showWhen 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

@@ -0,0 +1 @@
+{"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,CAsKpB"}

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

@@ -0,0 +1,207 @@
+/**
+ * Format a showWhen condition into a human-readable label.
+ * Pure function — no runtime dependency.
+ */
+/**
+ * Format match criteria as a parenthetical string.
+ * { tagName: 'a' } → '(tagName: a)'
+ */
+function formatMatch(match) {
+    if (!match || Object.keys(match).length === 0)
+        return '';
+    const parts = Object.entries(match).map(([k, v]) => `${k}: ${v}`);
+    return ` (${parts.join(', ')})`;
+}
+/**
+ * Format an operator for display.
+ */
+function formatOperator(op) {
+    switch (op) {
+        case 'gte':
+            return '\u2265'; // ≥
+        case 'lte':
+            return '\u2264'; // ≤
+        case 'gt':
+            return '>';
+        case 'lt':
+            return '<';
+        case 'eq':
+            return '=';
+        default:
+            return op;
+    }
+}
+/**
+ * Convert a hyphenated or underscored key into human-readable lowercase text.
+ * e.g. "fine-arts-page-views" → "fine arts page views"
+ */
+function humanizeKey(key) {
+    return key.replace(/[-_]/g, ' ').toLowerCase();
+}
+/**
+ * Strip trailing wildcard segments from a URL path.
+ * e.g. "/fine-arts/**" → "/fine-arts/"
+ */
+function cleanUrl(url) {
+    return url.replace(/\/?\*+$/, '/').replace(/\/\/$/, '/');
+}
+// Pre-compiled regexes for event_count classification
+const PAGE_VIEW_RE = /page.?view/i;
+const CLICK_RE = /click/i;
+/**
+ * Convert a Condition object into a human-readable label.
+ * For event_count conditions, also returns progress data.
+ */
+export function formatConditionLabel(condition, accumulatorCount) {
+    switch (condition.type) {
+        case 'event_count': {
+            const key = condition.key;
+            const op = condition.operator;
+            const target = condition.count;
+            const current = accumulatorCount ?? 0;
+            const humanized = humanizeKey(key);
+            let instruction;
+            let shortLabel;
+            if (PAGE_VIEW_RE.test(humanized)) {
+                // Extract the topic by removing "page view(s)" from the humanized key
+                const topic = humanized.replace(/\s*page\s*views?\s*/i, '').trim();
+                instruction = topic
+                    ? `View ${topic} pages ${target}+ times`
+                    : `View pages ${target}+ times`;
+                shortLabel = `View ${target}+ times`;
+            }
+            else if (CLICK_RE.test(humanized)) {
+                const topic = humanized.replace(/\s*clicks?\s*/i, '').trim();
+                instruction = topic
+                    ? `Click ${topic} ${target}+ times`
+                    : `Click ${target}+ times`;
+                shortLabel = `${target}+ clicks`;
+            }
+            else {
+                // Generic event
+                const lastWord = humanized.trim().split(' ').filter(w => w).pop() || 'events';
+                instruction = `Reach ${target}+ ${humanized} events`;
+                shortLabel = `${target}+ ${lastWord}s`;
+            }
+            return {
+                label: `${key} ${formatOperator(op)} ${target}`,
+                instruction,
+                shortLabel,
+                progress: { current, target, operator: op },
+            };
+        }
+        case 'page_url': {
+            const url = condition.url;
+            const cleaned = cleanUrl(url);
+            const hasWildcard = url !== cleaned;
+            const instruction = hasWildcard
+                ? `Visit a ${cleaned} page`
+                : `Visit ${cleaned}`;
+            return {
+                label: `${url}`,
+                instruction,
+                shortLabel: cleaned,
+            };
+        }
+        case 'anchor_visible': {
+            const anchorId = condition.anchorId;
+            const state = condition.state;
+            return {
+                label: `${anchorId} (${state})`,
+                instruction: `Scroll until ${anchorId} is ${state}`,
+                shortLabel: `${anchorId}`,
+            };
+        }
+        case 'event_occurred': {
+            const eventName = condition.eventName;
+            return {
+                label: `${eventName}`,
+                instruction: `Trigger a ${eventName} event`,
+                shortLabel: `${eventName}`,
+            };
+        }
+        case 'state_equals': {
+            const key = condition.key;
+            const val = condition.value === undefined ? 'undefined' : JSON.stringify(condition.value);
+            return {
+                label: `${key} = ${val}`,
+                instruction: `${key} equals ${val}`,
+                shortLabel: `${key}`,
+            };
+        }
+        case 'viewport': {
+            const parts = [];
+            if (condition.minWidth !== undefined)
+                parts.push(`w ${formatOperator('gte')} ${condition.minWidth}px`);
+            if (condition.maxWidth !== undefined)
+                parts.push(`w ${formatOperator('lte')} ${condition.maxWidth}px`);
+            if (condition.minHeight !== undefined)
+                parts.push(`h ${formatOperator('gte')} ${condition.minHeight}px`);
+            if (condition.maxHeight !== undefined)
+                parts.push(`h ${formatOperator('lte')} ${condition.maxHeight}px`);
+            const label = parts.join(', ') || 'any viewport';
+            const instruction = parts.length > 0
+                ? `Use a viewport ${parts.join(' and ')}`
+                : 'Use a viewport of any size';
+            const shortLabel = parts.length > 0 ? parts[0] : 'Any size';
+            return { label, instruction, shortLabel };
+        }
+        case 'session_metric': {
+            const key = condition.key;
+            const op = condition.operator;
+            const threshold = condition.threshold;
+            return {
+                label: `${key} ${formatOperator(op)} ${threshold}`,
+                instruction: `${key} reaches ${threshold}+`,
+                shortLabel: `${key} ${threshold}+`,
+            };
+        }
+        case 'dismissed': {
+            const inverted = condition.inverted;
+            const key = condition.key;
+            const target = key || 'this';
+            return {
+                label: inverted ? 'not dismissed' : 'dismissed',
+                instruction: inverted
+                    ? `Do not dismiss ${target}`
+                    : `Dismiss ${target}`,
+                shortLabel: inverted ? 'Not dismissed' : 'Dismissed',
+            };
+        }
+        case 'cooldown_active': {
+            const inverted = condition.inverted;
+            return {
+                label: inverted ? 'cooldown inactive' : 'cooldown active',
+                instruction: inverted
+                    ? 'Wait for cooldown to expire'
+                    : 'Cooldown is active',
+                shortLabel: inverted ? 'Cooldown done' : 'Cooldown active',
+            };
+        }
+        case 'frequency_limit': {
+            const inverted = condition.inverted;
+            const limit = condition.limit;
+            return {
+                label: `shown ${formatOperator(inverted ? 'lt' : 'gte')} ${limit} times`,
+                instruction: inverted
+                    ? `Shown fewer than ${limit} times`
+                    : `Shown ${limit}+ times`,
+                shortLabel: inverted ? `< ${limit} views` : `${limit}+ views`,
+            };
+        }
+        case 'route': {
+            const routeId = condition.routeId;
+            return {
+                label: `${routeId}`,
+                instruction: `Navigate to ${routeId} route`,
+                shortLabel: `${routeId}`,
+            };
+        }
+        default:
+            return {
+                label: `${condition.type}`,
+                instruction: `${condition.type}`,
+                shortLabel: `${condition.type}`,
+            };
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Returns a live DOMRect for an element, updating on scroll, resize,
+ * and element size changes.
+ *
+ * Uses requestAnimationFrame to batch updates and avoid layout thrashing.
+ */
+export declare function useElementRect(element: HTMLElement | null): DOMRect | null;
+//# sourceMappingURL=useElementRect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useElementRect.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementRect.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CA6C1E"}