@syntrologie/adapt-content 2.3.0 → 2.4.0-canary.10

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

@@ -22,4 +22,24 @@ describe('EditorPanelShell', () => {
         const panel = container.querySelector('[data-syntro-editor-panel]');
         expect(panel).toBeNull();
     });
+    it('renders with se-left-0 class when position is left', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, position: "left", children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel).toBeTruthy();
+        expect(panel.className).toContain('se-left-0');
+        expect(panel.className).not.toContain('se-right-0');
+    });
+    it('renders with se-right-0 class when position is right', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, position: "right", children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel).toBeTruthy();
+        expect(panel.className).toContain('se-right-0');
+        expect(panel.className).not.toContain('se-left-0');
+    });
+    it('has 480px width class', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, position: "right", children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel).toBeTruthy();
+        expect(panel.className).toContain('se-w-[480px]');
+    });
 });

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/selectorGenerator.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selectorGenerator.test.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/selectorGenerator.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectorGenerator.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/selectorGenerator.test.ts"],"names":[],"mappings":""}

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/selectorGenerator.test.js

@@ -0,0 +1,257 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+// Shim CSS.escape for jsdom (not available by default)
+if (typeof CSS === 'undefined') {
+    globalThis.CSS = { escape: (str) => str.replace(/([^\w-])/g, '\\$1') };
+}
+else if (!CSS.escape) {
+    CSS.escape = (str) => str.replace(/([^\w-])/g, '\\$1');
+}
+import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
+// =============================================================================
+// Mock css-selector-generator
+// =============================================================================
+vi.mock('css-selector-generator', () => ({
+    getCssSelector: vi.fn(),
+}));
+import { getCssSelector } from 'css-selector-generator';
+const mockGetCssSelector = vi.mocked(getCssSelector);
+// =============================================================================
+// HELPERS
+// =============================================================================
+function createElement(tag, attrs = {}) {
+    const el = document.createElement(tag);
+    for (const [key, value] of Object.entries(attrs)) {
+        if (key === 'textContent') {
+            el.textContent = value;
+        }
+        else if (key === 'className') {
+            el.className = value;
+        }
+        else {
+            el.setAttribute(key, value);
+        }
+    }
+    document.body.appendChild(el);
+    return el;
+}
+// =============================================================================
+// generateSelector
+// =============================================================================
+describe('generateSelector', () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+        document.body.innerHTML = '';
+    });
+    it('calls getCssSelector with element and default options', () => {
+        const el = createElement('div');
+        mockGetCssSelector.mockReturnValue('div');
+        generateSelector(el);
+        expect(mockGetCssSelector).toHaveBeenCalledWith(el, expect.objectContaining({
+            includeTag: true,
+            maxCombinations: 100,
+        }));
+    });
+    it('returns the selector from getCssSelector', () => {
+        const el = createElement('div', { id: 'my-id' });
+        mockGetCssSelector.mockReturnValue('#my-id');
+        const result = generateSelector(el);
+        expect(result).toBe('#my-id');
+    });
+    it('passes custom options through', () => {
+        const el = createElement('div');
+        mockGetCssSelector.mockReturnValue('div');
+        generateSelector(el, { includeTag: false, maxCombinations: 50 });
+        expect(mockGetCssSelector).toHaveBeenCalledWith(el, expect.objectContaining({
+            includeTag: false,
+            maxCombinations: 50,
+        }));
+    });
+    it('includes attribute selectors when preferTestIds is true (default)', () => {
+        const el = createElement('div');
+        mockGetCssSelector.mockReturnValue('div');
+        generateSelector(el);
+        const call = mockGetCssSelector.mock.calls[0];
+        const options = call[1];
+        expect(options.selectors).toContain('attribute');
+    });
+    it('excludes attribute selectors when preferTestIds is false', () => {
+        const el = createElement('div');
+        mockGetCssSelector.mockReturnValue('div');
+        generateSelector(el, { preferTestIds: false });
+        const call = mockGetCssSelector.mock.calls[0];
+        const options = call[1];
+        expect(options.selectors).not.toContain('attribute');
+    });
+    it('includes blacklist patterns for dynamic classes', () => {
+        const el = createElement('div');
+        mockGetCssSelector.mockReturnValue('div');
+        generateSelector(el);
+        const call = mockGetCssSelector.mock.calls[0];
+        const options = call[1];
+        expect(options.blacklist).toBeDefined();
+        expect(Array.isArray(options.blacklist)).toBe(true);
+        expect(options.blacklist.length).toBeGreaterThan(0);
+    });
+    it('includes whitelist for stable attributes', () => {
+        const el = createElement('div');
+        mockGetCssSelector.mockReturnValue('div');
+        generateSelector(el);
+        const call = mockGetCssSelector.mock.calls[0];
+        const options = call[1];
+        expect(options.whitelist).toBeDefined();
+        expect(Array.isArray(options.whitelist)).toBe(true);
+    });
+    it('falls back to generateFallbackSelector when getCssSelector throws', () => {
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+        const parent = document.createElement('div');
+        parent.id = 'parent';
+        document.body.appendChild(parent);
+        const child = document.createElement('span');
+        parent.appendChild(child);
+        mockGetCssSelector.mockImplementation(() => {
+            throw new Error('Failed');
+        });
+        const result = generateSelector(child);
+        // Fallback should produce a path-based selector
+        expect(result).toContain('#parent');
+        expect(result).toContain('span');
+        expect(warnSpy).toHaveBeenCalled();
+        document.body.removeChild(parent);
+    });
+    describe('fallback selector generation', () => {
+        it('uses ID when element has an ID', () => {
+            const el = document.createElement('div');
+            el.id = 'unique-element';
+            document.body.appendChild(el);
+            mockGetCssSelector.mockImplementation(() => {
+                throw new Error('Failed');
+            });
+            vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const result = generateSelector(el);
+            expect(result).toContain('#unique-element');
+            document.body.removeChild(el);
+        });
+        it('uses nth-child for elements without ID', () => {
+            const parent = document.createElement('div');
+            document.body.appendChild(parent);
+            const child1 = document.createElement('p');
+            const child2 = document.createElement('p');
+            parent.appendChild(child1);
+            parent.appendChild(child2);
+            mockGetCssSelector.mockImplementation(() => {
+                throw new Error('Failed');
+            });
+            vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const result = generateSelector(child2);
+            expect(result).toContain('nth-child');
+            document.body.removeChild(parent);
+        });
+        it('stops at element with ID (shortest unique path)', () => {
+            const grandparent = document.createElement('div');
+            grandparent.id = 'root';
+            document.body.appendChild(grandparent);
+            const parent = document.createElement('div');
+            grandparent.appendChild(parent);
+            const child = document.createElement('span');
+            parent.appendChild(child);
+            mockGetCssSelector.mockImplementation(() => {
+                throw new Error('Failed');
+            });
+            vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const result = generateSelector(child);
+            // Should start with #root
+            expect(result.startsWith('#root')).toBe(true);
+            document.body.removeChild(grandparent);
+        });
+    });
+});
+// =============================================================================
+// validateSelector
+// =============================================================================
+describe('validateSelector', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('returns true when selector matches the expected element', () => {
+        const el = createElement('div', { id: 'target' });
+        expect(validateSelector('#target', el)).toBe(true);
+    });
+    it('returns false when selector matches a different element', () => {
+        const el1 = createElement('div', { id: 'first' });
+        createElement('div', { id: 'second' });
+        expect(validateSelector('#second', el1)).toBe(false);
+    });
+    it('returns false when selector matches nothing', () => {
+        const el = createElement('div');
+        expect(validateSelector('#nonexistent', el)).toBe(false);
+    });
+    it('returns false for invalid selector syntax', () => {
+        const el = createElement('div');
+        expect(validateSelector('[[[invalid', el)).toBe(false);
+    });
+});
+// =============================================================================
+// getElementDescription
+// =============================================================================
+describe('getElementDescription', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('includes tag name', () => {
+        const el = createElement('button');
+        expect(getElementDescription(el)).toContain('button');
+    });
+    it('includes ID when present', () => {
+        const el = createElement('div', { id: 'my-btn' });
+        expect(getElementDescription(el)).toContain('#my-btn');
+    });
+    it('includes static class names', () => {
+        const el = createElement('div', { className: 'header main-content' });
+        const desc = getElementDescription(el);
+        expect(desc).toContain('.header');
+        expect(desc).toContain('.main-content');
+    });
+    it('excludes dynamic class names', () => {
+        const el = createElement('div', { className: 'css-1abc23 my-class' });
+        const desc = getElementDescription(el);
+        // Dynamic class css-1abc23 should be filtered out
+        expect(desc).not.toContain('css-1abc23');
+        expect(desc).toContain('my-class');
+    });
+    it('includes text content preview (truncated at 30 chars)', () => {
+        const el = createElement('p', {
+            textContent: 'This is a very long text that should be truncated',
+        });
+        const desc = getElementDescription(el);
+        expect(desc).toContain('"');
+        expect(desc).toContain('...');
+    });
+    it('includes full text for short content', () => {
+        const el = createElement('span', { textContent: 'Hello' });
+        const desc = getElementDescription(el);
+        expect(desc).toContain('"Hello"');
+        expect(desc).not.toContain('...');
+    });
+    it('handles elements with no text content', () => {
+        const el = createElement('img');
+        const desc = getElementDescription(el);
+        expect(desc).toBe('img');
+    });
+    it('limits class names to 2', () => {
+        const el = createElement('div', { className: 'cls-a cls-b cls-c cls-d' });
+        const desc = getElementDescription(el);
+        // Should include at most 2 classes
+        expect(desc).toContain('.cls-a');
+        expect(desc).toContain('.cls-b');
+        expect(desc).not.toContain('.cls-c');
+    });
+    it('handles SVGElement className (not a string)', () => {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        const svg = document.createElementNS(svgNS, 'svg');
+        document.body.appendChild(svg);
+        // SVGElement.className is an SVGAnimatedString, not a string
+        const desc = getElementDescription(svg);
+        expect(desc).toContain('svg');
+        document.body.removeChild(svg);
+    });
+});

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/useShowWhenStatus.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useShowWhenStatus.test.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/useShowWhenStatus.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowWhenStatus.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/useShowWhenStatus.test.ts"],"names":[],"mappings":""}

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/useShowWhenStatus.test.js

@@ -0,0 +1,1015 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useShowWhenStatus } from '../hooks/useShowWhenStatus';
+function createMockRuntime(overrides = {}) {
+    return {
+        context: {
+            get: () => ({
+                page: { url: '/products', routeId: 'products' },
+                viewport: { width: 1024, height: 768 },
+                anchors: [],
+            }),
+        },
+        accumulator: {
+            getCount: () => 0,
+            subscribe: () => () => { },
+        },
+        events: {
+            hasRecentEvent: () => false,
+        },
+        state: {
+            isDismissed: () => false,
+            isCooldownActive: () => false,
+            getFrequencyCount: () => 0,
+            getSessionMetric: () => 0,
+        },
+        ...overrides,
+    };
+}
+function setRuntime(runtime) {
+    if (runtime) {
+        window.SynOS = { handle: { runtime } };
+    }
+    else {
+        delete window.SynOS;
+    }
+}
+// =============================================================================
+// TESTS
+// =============================================================================
+describe('useShowWhenStatus', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        setRuntime(null);
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        setRuntime(null);
+    });
+    // ===========================================================================
+    // Basic behavior
+    // ===========================================================================
+    it('returns empty map when no runtime is available', () => {
+        setRuntime(null);
+        const { result } = renderHook(() => useShowWhenStatus([]));
+        expect(result.current.size).toBe(0);
+    });
+    it('returns null status for items without showWhen', () => {
+        setRuntime(createMockRuntime());
+        const items = [{ id: 'item-1' }];
+        const { result } = renderHook(() => useShowWhenStatus(items));
+        expect(result.current.get('item-1')).toBeNull();
+    });
+    it('returns fallback status for non-rules type showWhen', () => {
+        setRuntime(createMockRuntime());
+        const items = [
+            {
+                id: 'item-1',
+                showWhen: { type: 'always', default: true },
+            },
+        ];
+        const { result } = renderHook(() => useShowWhenStatus(items));
+        const status = result.current.get('item-1');
+        expect(status?.visible).toBe(true);
+        expect(status?.isFallback).toBe(true);
+        expect(status?.conditions).toEqual([]);
+    });
+    it('returns fallback status for rules type with no rules', () => {
+        setRuntime(createMockRuntime());
+        const items = [
+            {
+                id: 'item-1',
+                showWhen: { type: 'rules', rules: [], default: false },
+            },
+        ];
+        const { result } = renderHook(() => useShowWhenStatus(items));
+        const status = result.current.get('item-1');
+        expect(status?.visible).toBe(false);
+        expect(status?.isFallback).toBe(true);
+    });
+    // ===========================================================================
+    // event_count condition
+    // ===========================================================================
+    describe('event_count condition', () => {
+        it('passes when count >= target (gte)', () => {
+            setRuntime(createMockRuntime({
+                accumulator: {
+                    getCount: (key) => (key === 'page-views' ? 5 : 0),
+                    subscribe: () => () => { },
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_count', key: 'page-views', operator: 'gte', count: 3 }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            const status = result.current.get('item-1');
+            expect(status?.visible).toBe(true);
+            expect(status?.isFallback).toBe(false);
+            expect(status?.conditions[0].passed).toBe(true);
+        });
+        it('fails when count < target (gte)', () => {
+            setRuntime(createMockRuntime({
+                accumulator: {
+                    getCount: () => 2,
+                    subscribe: () => () => { },
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_count', key: 'clicks', operator: 'gte', count: 5 }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            const status = result.current.get('item-1');
+            expect(status?.visible).toBe(false);
+            expect(status?.isFallback).toBe(true);
+        });
+        it.each([
+            { operator: 'lte', count: 5, actual: 3, expected: true },
+            { operator: 'lte', count: 3, actual: 5, expected: false },
+            { operator: 'eq', count: 3, actual: 3, expected: true },
+            { operator: 'eq', count: 3, actual: 4, expected: false },
+            { operator: 'gt', count: 3, actual: 4, expected: true },
+            { operator: 'gt', count: 3, actual: 3, expected: false },
+            { operator: 'lt', count: 3, actual: 2, expected: true },
+            { operator: 'lt', count: 3, actual: 3, expected: false },
+        ])('event_count $operator: actual=$actual vs target=$count => $expected', ({ operator, count, actual, expected, }) => {
+            setRuntime(createMockRuntime({
+                accumulator: {
+                    getCount: () => actual,
+                    subscribe: () => () => { },
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_count', key: 'events', operator, count }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(expected);
+        });
+        it('skips event_count when accumulator is missing', () => {
+            setRuntime(createMockRuntime({
+                accumulator: undefined,
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_count', key: 'clicks', operator: 'gte', count: 1 }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+    });
+    // ===========================================================================
+    // page_url condition
+    // ===========================================================================
+    describe('page_url condition', () => {
+        it('passes for exact URL match', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/products' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'page_url', url: '/products' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('passes for single-star wildcard URL match (single segment)', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/products/shoes' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'page_url', url: '/products/*' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('single-star wildcard does not match multi-segment paths', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/products/shoes/running' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'page_url', url: '/products/*' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            // Single * only matches one path segment
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+        it('fails for non-matching URL', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/about' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'page_url', url: '/products' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+    });
+    // ===========================================================================
+    // route condition
+    // ===========================================================================
+    describe('route condition', () => {
+        it('passes when routeId matches', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/products', routeId: 'products' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'route', routeId: 'products' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('fails when routeId does not match', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/about', routeId: 'about' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'route', routeId: 'home' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+    });
+    // ===========================================================================
+    // anchor_visible condition
+    // ===========================================================================
+    describe('anchor_visible condition', () => {
+        it('passes for visible anchor', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 1024, height: 768 },
+                        anchors: [{ anchorId: 'hero', visible: true, present: true }],
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'anchor_visible', anchorId: 'hero', state: 'visible' }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('passes for present anchor', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 1024, height: 768 },
+                        anchors: [{ anchorId: 'sidebar', visible: false, present: true }],
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'anchor_visible', anchorId: 'sidebar', state: 'present' }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('passes for absent anchor', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 1024, height: 768 },
+                        anchors: [],
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [
+                                    { type: 'anchor_visible', anchorId: 'deleted-section', state: 'absent' },
+                                ],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+    });
+    // ===========================================================================
+    // event_occurred condition
+    // ===========================================================================
+    describe('event_occurred condition', () => {
+        it('passes when recent event exists', () => {
+            setRuntime(createMockRuntime({
+                events: { hasRecentEvent: (name) => name === 'click_cta' },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_occurred', eventName: 'click_cta', withinMs: 5000 }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('falls back to false when events service is missing', () => {
+            setRuntime(createMockRuntime({
+                events: undefined,
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_occurred', eventName: 'click_cta' }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+    });
+    // ===========================================================================
+    // viewport condition
+    // ===========================================================================
+    describe('viewport condition', () => {
+        it('passes when viewport matches all constraints', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [
+                                    {
+                                        type: 'viewport',
+                                        minWidth: 800,
+                                        maxWidth: 1200,
+                                        minHeight: 600,
+                                        maxHeight: 900,
+                                    },
+                                ],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('fails when width is below minWidth', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 500, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'viewport', minWidth: 800 }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+        it('fails when width exceeds maxWidth', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 2000, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'viewport', maxWidth: 1200 }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+        it('fails when height is below minHeight', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 1024, height: 300 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'viewport', minHeight: 600 }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+        it('fails when height exceeds maxHeight', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/' },
+                        viewport: { width: 1024, height: 1500 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'viewport', maxHeight: 900 }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+        });
+    });
+    // ===========================================================================
+    // session_metric condition
+    // ===========================================================================
+    describe('session_metric condition', () => {
+        it.each([
+            { operator: 'gte', threshold: 3, actual: 5, expected: true },
+            { operator: 'gte', threshold: 5, actual: 3, expected: false },
+            { operator: 'lte', threshold: 5, actual: 3, expected: true },
+            { operator: 'eq', threshold: 3, actual: 3, expected: true },
+            { operator: 'gt', threshold: 3, actual: 4, expected: true },
+            { operator: 'lt', threshold: 3, actual: 2, expected: true },
+        ])('session_metric $operator: $actual vs $threshold => $expected', ({ operator, threshold, actual, expected, }) => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: () => false,
+                    isCooldownActive: () => false,
+                    getFrequencyCount: () => 0,
+                    getSessionMetric: (key) => (key === 'engagement' ? actual : 0),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'session_metric', key: 'engagement', operator, threshold }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(expected);
+        });
+    });
+    // ===========================================================================
+    // dismissed condition
+    // ===========================================================================
+    describe('dismissed condition', () => {
+        it('passes when item is dismissed', () => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: (key) => key === 'tooltip-1',
+                    isCooldownActive: () => false,
+                    getFrequencyCount: () => 0,
+                    getSessionMetric: () => 0,
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'dismissed', key: 'tooltip-1' }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('passes inverted dismissed (not dismissed)', () => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: () => false,
+                    isCooldownActive: () => false,
+                    getFrequencyCount: () => 0,
+                    getSessionMetric: () => 0,
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'dismissed', key: 'tooltip-1', inverted: true }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+    });
+    // ===========================================================================
+    // cooldown_active condition
+    // ===========================================================================
+    describe('cooldown_active condition', () => {
+        it('passes when cooldown is active', () => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: () => false,
+                    isCooldownActive: () => true,
+                    getFrequencyCount: () => 0,
+                    getSessionMetric: () => 0,
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'cooldown_active', key: 'tip-1' }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('passes inverted cooldown (cooldown not active)', () => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: () => false,
+                    isCooldownActive: () => false,
+                    getFrequencyCount: () => 0,
+                    getSessionMetric: () => 0,
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'cooldown_active', key: 'tip-1', inverted: true }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+    });
+    // ===========================================================================
+    // frequency_limit condition
+    // ===========================================================================
+    describe('frequency_limit condition', () => {
+        it('passes when frequency count >= limit', () => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: () => false,
+                    isCooldownActive: () => false,
+                    getFrequencyCount: () => 5,
+                    getSessionMetric: () => 0,
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'frequency_limit', key: 'tip-1', limit: 3 }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('passes inverted frequency limit (below limit)', () => {
+            setRuntime(createMockRuntime({
+                state: {
+                    isDismissed: () => false,
+                    isCooldownActive: () => false,
+                    getFrequencyCount: () => 1,
+                    getSessionMetric: () => 0,
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'frequency_limit', key: 'tip-1', limit: 3, inverted: true }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+    });
+    // ===========================================================================
+    // Multi-condition rules
+    // ===========================================================================
+    describe('multi-condition rules', () => {
+        it('requires ALL conditions to pass for a rule to match', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/products', routeId: 'products' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+                accumulator: {
+                    getCount: () => 5,
+                    subscribe: () => () => { },
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [
+                                    { type: 'page_url', url: '/products' },
+                                    { type: 'event_count', key: 'views', operator: 'gte', count: 3 },
+                                ],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.visible).toBe(true);
+        });
+        it('falls through to next rule when first rule fails', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/about', routeId: 'about' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'page_url', url: '/products' }],
+                                value: true,
+                            },
+                            {
+                                conditions: [{ type: 'page_url', url: '/about' }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            expect(result.current.get('item-1')?.visible).toBe(true);
+        });
+        it('falls to default when no rules match', () => {
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: '/contact' },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'page_url', url: '/products' }], value: true }],
+                        default: true,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            const status = result.current.get('item-1');
+            expect(status?.visible).toBe(true);
+            expect(status?.isFallback).toBe(true);
+        });
+    });
+    // ===========================================================================
+    // Reactive updates
+    // ===========================================================================
+    describe('reactive updates', () => {
+        it('subscribes to accumulator and re-evaluates on changes', () => {
+            let subscribeCb = null;
+            let currentCount = 0;
+            setRuntime(createMockRuntime({
+                accumulator: {
+                    getCount: () => currentCount,
+                    subscribe: (cb) => {
+                        subscribeCb = cb;
+                        return () => {
+                            subscribeCb = null;
+                        };
+                    },
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [
+                            {
+                                conditions: [{ type: 'event_count', key: 'clicks', operator: 'gte', count: 3 }],
+                                value: true,
+                            },
+                        ],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            // Initially: count=0, should fail
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(false);
+            // Update count and trigger subscription
+            currentCount = 5;
+            act(() => {
+                subscribeCb?.();
+            });
+            expect(result.current.get('item-1')?.conditions[0].passed).toBe(true);
+        });
+        it('re-evaluates on polling interval', () => {
+            let currentUrl = '/home';
+            setRuntime(createMockRuntime({
+                context: {
+                    get: () => ({
+                        page: { url: currentUrl },
+                        viewport: { width: 1024, height: 768 },
+                    }),
+                },
+            }));
+            const items = [
+                {
+                    id: 'item-1',
+                    showWhen: {
+                        type: 'rules',
+                        rules: [{ conditions: [{ type: 'page_url', url: '/products' }], value: true }],
+                        default: false,
+                    },
+                },
+            ];
+            const { result } = renderHook(() => useShowWhenStatus(items));
+            // Initially: URL is /home, should fail
+            expect(result.current.get('item-1')?.visible).toBe(false);
+            // Change URL and advance timer
+            currentUrl = '/products';
+            act(() => {
+                vi.advanceTimersByTime(2000);
+            });
+            expect(result.current.get('item-1')?.visible).toBe(true);
+        });
+        it('cleans up subscription and interval on unmount', () => {
+            let unsubCalled = false;
+            setRuntime(createMockRuntime({
+                accumulator: {
+                    getCount: () => 0,
+                    subscribe: () => () => {
+                        unsubCalled = true;
+                    },
+                },
+            }));
+            const { unmount } = renderHook(() => useShowWhenStatus([]));
+            unmount();
+            expect(unsubCalled).toBe(true);
+        });
+    });
+});

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

@@ -106,7 +106,7 @@ function DraggableFab({ isOpen, onToggle, initialRight, zIndex, portalTarget })
 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
+    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-[480px] 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntrologie/adapt-content",
-  "version": "2.3.0",
+  "version": "2.4.0-canary.10",
   "description": "Adaptive Content app - DOM manipulation actions for text, attributes, and styles",
   "license": "Proprietary",
   "private": false,
@@ -51,11 +51,11 @@
   "dependencies": {
     "@syntrologie/shared-editor-ui": "*",
     "css-selector-generator": "^3.8.0",
-    "data-urls": "^5.0.0",
-    "@syntrologie/sdk-contracts": "*"
+    "data-urls": "^5.0.0"
   },
   "devDependencies": {
     "@floating-ui/dom": "^1.7.5",
+    "@syntrologie/sdk-contracts": "*",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",