@syntrologie/adapt-content 2.2.0-canary.9 → 2.2.0

package/dist/reconciliation-guard.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Reconciliation Guard - MutationObserver defense against React DOM removal.
+ *
+ * When the Syntrologie SDK inserts DOM nodes into a React-managed subtree
+ * (via content:insertHtml), React's reconciliation will silently remove them
+ * on the next render because they don't exist in React's virtual DOM.
+ *
+ * This guard watches for the removal of our inserted container and re-inserts
+ * it using a debounced retry mechanism with a maximum retry count to prevent
+ * infinite loops (e.g., in React StrictMode which double-invokes effects).
+ */
+export interface ReconciliationGuardOptions {
+    /** Maximum re-insertion attempts before giving up. Default: 3 */
+    maxRetries?: number;
+    /** Debounce interval in ms to coalesce rapid removals. Default: 50 */
+    debounceMs?: number;
+}
+/**
+ * Watch for a container element being removed from the DOM by an external
+ * framework (React, Vue, etc.) and call `reinsertFn` to re-insert it.
+ *
+ * @param container  The element we inserted (has data-syntro-action-id)
+ * @param anchor     The anchor element our container is positioned relative to
+ * @param reinsertFn Called when the container is removed — should re-insert it
+ * @param opts       Configuration for retry limits and debounce timing
+ * @returns          Cleanup function that disconnects the observer
+ */
+export declare function guardAgainstReconciliation(container: HTMLElement, anchor: HTMLElement, reinsertFn: () => void, opts?: ReconciliationGuardOptions): () => void;
+//# sourceMappingURL=reconciliation-guard.d.ts.map

package/dist/reconciliation-guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reconciliation-guard.d.ts","sourceRoot":"","sources":["../src/reconciliation-guard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,WAAW,EACtB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,MAAM,IAAI,EACtB,IAAI,CAAC,EAAE,0BAA0B,GAChC,MAAM,IAAI,CAoDZ"}

package/dist/reconciliation-guard.js

@@ -0,0 +1,72 @@
+/**
+ * Reconciliation Guard - MutationObserver defense against React DOM removal.
+ *
+ * When the Syntrologie SDK inserts DOM nodes into a React-managed subtree
+ * (via content:insertHtml), React's reconciliation will silently remove them
+ * on the next render because they don't exist in React's virtual DOM.
+ *
+ * This guard watches for the removal of our inserted container and re-inserts
+ * it using a debounced retry mechanism with a maximum retry count to prevent
+ * infinite loops (e.g., in React StrictMode which double-invokes effects).
+ */
+/**
+ * Watch for a container element being removed from the DOM by an external
+ * framework (React, Vue, etc.) and call `reinsertFn` to re-insert it.
+ *
+ * @param container  The element we inserted (has data-syntro-action-id)
+ * @param anchor     The anchor element our container is positioned relative to
+ * @param reinsertFn Called when the container is removed — should re-insert it
+ * @param opts       Configuration for retry limits and debounce timing
+ * @returns          Cleanup function that disconnects the observer
+ */
+export function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
+    const maxRetries = opts?.maxRetries ?? 3;
+    const debounceMs = opts?.debounceMs ?? 50;
+    // Find the nearest parent to observe. Prefer container's parent, then anchor's.
+    const observeTarget = container.parentElement ?? anchor.parentElement;
+    if (!observeTarget)
+        return () => { };
+    let retries = 0;
+    let debounceTimer = null;
+    let disconnected = false;
+    const observer = new MutationObserver((mutations) => {
+        if (disconnected)
+            return;
+        for (const mutation of mutations) {
+            for (const removed of mutation.removedNodes) {
+                // Check if the removed node is our container
+                if (removed !== container)
+                    continue;
+                if (retries >= maxRetries) {
+                    observer.disconnect();
+                    disconnected = true;
+                    return;
+                }
+                // Debounce to coalesce rapid React re-renders
+                if (debounceTimer)
+                    clearTimeout(debounceTimer);
+                debounceTimer = setTimeout(() => {
+                    if (disconnected)
+                        return;
+                    retries++;
+                    try {
+                        reinsertFn();
+                    }
+                    catch {
+                        // Re-insertion failed — stop trying
+                        observer.disconnect();
+                        disconnected = true;
+                    }
+                }, debounceMs);
+                return; // Found our container, no need to check further
+            }
+        }
+    });
+    observer.observe(observeTarget, { childList: true, subtree: true });
+    return () => {
+        disconnected = true;
+        observer.disconnect();
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+    };
+}

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EAEd,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAmE9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CA+BxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwDxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA8B1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,iBAAiB,CA8BhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA+C1D,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;EAOZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EAEd,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CA4F9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CA+BxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwDxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA8B1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,iBAAiB,CA8BhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA+C1D,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;EAOZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}

package/dist/runtime.js

@@ -4,6 +4,7 @@
  * DOM manipulation actions: insertHtml, setText, setAttr, addClass, removeClass, setStyle.
  * These follow the hostPatcher snapshot pattern for safe reversibility.
  */
+import { guardAgainstReconciliation } from './reconciliation-guard';
 import { sanitizeHtml } from './sanitizer';
 // ============================================================================
 // Executors
@@ -48,8 +49,31 @@ export const executeInsertHtml = async (action, context) => {
         anchorId: action.anchorId,
         position: action.position,
     });
+    // Guard against React reconciliation removing our container.
+    // The reinsert function re-applies the same insertion strategy.
+    const reinsertFn = () => {
+        switch (action.position) {
+            case 'before':
+                anchorEl.insertAdjacentElement('beforebegin', container);
+                break;
+            case 'after':
+                anchorEl.insertAdjacentElement('afterend', container);
+                break;
+            case 'prepend':
+                anchorEl.insertBefore(container, anchorEl.firstChild);
+                break;
+            case 'append':
+                anchorEl.appendChild(container);
+                break;
+            case 'replace':
+                // Cannot re-insert for replace — anchor was already replaced
+                break;
+        }
+    };
+    const guardCleanup = guardAgainstReconciliation(container, anchorEl, reinsertFn);
     return {
         cleanup: () => {
+            guardCleanup();
             if (action.position === 'replace' && originalContent !== null) {
                 // Restore original element
                 const restoredEl = document.createElement(anchorEl.tagName);

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

@@ -23,6 +23,7 @@ describe('BeforeAfterToggle', () => {
     it('highlights active mode with blue class', () => {
         const { getByText } = render(_jsx(BeforeAfterToggle, { mode: "before", onToggle: () => { } }));
         expect(getByText('Before').className).toContain('se-text-blue-5');
+        expect(getByText('Before').className).toContain('se-bg-blue-5/30');
         expect(getByText('After').className).toContain('se-text-text-secondary');
     });
 });

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

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

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

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

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ConditionStatusLine } from '../components/ConditionStatusLine';
+describe('ConditionStatusLine', () => {
+    it('returns null when status is null', () => {
+        const { container } = render(_jsx(ConditionStatusLine, { status: null }));
+        expect(container.innerHTML).toBe('');
+    });
+    it('renders single condition inline', () => {
+        const status = {
+            visible: true,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        render(_jsx(ConditionStatusLine, { status: status }));
+        expect(screen.getByText('page_url:')).toBeTruthy();
+        expect(screen.getByText('/pricing')).toBeTruthy();
+    });
+    it('uses at least 12px font size for condition rows', () => {
+        const status = {
+            visible: true,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        const { container } = render(_jsx(ConditionStatusLine, { status: status }));
+        const row = container.firstElementChild;
+        expect(row.className).toContain('se-text-[12px]');
+        expect(row.className).not.toContain('se-text-[10px]');
+    });
+    it('uses secondary text color for readability', () => {
+        const status = {
+            visible: true,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        const { container } = render(_jsx(ConditionStatusLine, { status: status }));
+        const row = container.firstElementChild;
+        expect(row.className).toContain('se-text-text-secondary');
+    });
+    it('uses medium font weight for small text', () => {
+        const status = {
+            visible: true,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        const { container } = render(_jsx(ConditionStatusLine, { status: status }));
+        const row = container.firstElementChild;
+        expect(row.className).toContain('se-font-medium');
+    });
+    it('renders multi-condition summary with expand button', () => {
+        const status = {
+            visible: false,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/p', instruction: 'A', shortLabel: 'A' },
+                },
+                {
+                    type: 'event_count',
+                    passed: false,
+                    formatted: { label: 'views >= 2', instruction: 'B', shortLabel: 'B' },
+                },
+            ],
+        };
+        render(_jsx(ConditionStatusLine, { status: status }));
+        expect(screen.getByText('1 of 2 conditions met')).toBeTruthy();
+    });
+    it('uses at least 11px for expand indicator', () => {
+        const status = {
+            visible: false,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'a',
+                    passed: true,
+                    formatted: { label: 'a', instruction: 'A', shortLabel: 'A' },
+                },
+                {
+                    type: 'b',
+                    passed: false,
+                    formatted: { label: 'b', instruction: 'B', shortLabel: 'B' },
+                },
+            ],
+        };
+        const { container } = render(_jsx(ConditionStatusLine, { status: status }));
+        // The expand indicator is the last span in the button
+        const button = container.querySelector('button');
+        const indicator = button.querySelector('span:last-child');
+        expect(indicator.className).toContain('se-text-[11px]');
+        expect(indicator.className).not.toContain('se-text-[8px]');
+    });
+    it('expands to show individual condition rows on click', () => {
+        const status = {
+            visible: false,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/p', instruction: 'A', shortLabel: 'A' },
+                },
+                {
+                    type: 'event_count',
+                    passed: false,
+                    formatted: { label: 'views >= 2', instruction: 'B', shortLabel: 'B' },
+                },
+            ],
+        };
+        render(_jsx(ConditionStatusLine, { status: status }));
+        fireEvent.click(screen.getByText('1 of 2 conditions met'));
+        expect(screen.getByText('page_url:')).toBeTruthy();
+        expect(screen.getByText('event_count:')).toBeTruthy();
+    });
+    it('uses secondary color (not tertiary) for condition detail labels', () => {
+        const status = {
+            visible: true,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: true,
+                    formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        render(_jsx(ConditionStatusLine, { status: status }));
+        const label = screen.getByText('/pricing');
+        expect(label.className).toContain('se-text-text-secondary');
+        expect(label.className).not.toContain('se-text-text-tertiary');
+    });
+});

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

@@ -12,6 +12,12 @@ describe('DismissedSection', () => {
         fireEvent.click(getByText('Dismissed (2)'));
         expect(queryByText('revealed')).toBeTruthy();
     });
+    it('uses secondary text color for readability', () => {
+        const { getByText } = render(_jsx(DismissedSection, { count: 2, children: _jsx("span", { children: "child" }) }));
+        const button = getByText('Dismissed (2)').closest('[role="button"]');
+        expect(button.className).toContain('se-text-text-secondary');
+        expect(button.className).not.toContain('se-text-text-tertiary');
+    });
     it('collapses again on second click', () => {
         const { getByText, queryByText } = render(_jsx(DismissedSection, { count: 1, children: _jsx("span", { children: "content" }) }));
         fireEvent.click(getByText('Dismissed (1)'));

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

@@ -15,7 +15,7 @@ describe('EditorCard', () => {
     it('applies green border class when validated is true', () => {
         const { container } = render(_jsx(EditorCard, { itemKey: "k", validated: true, children: "child" }));
         const card = container.firstElementChild;
-        expect(card.className).toContain('se-border-green-4/40');
+        expect(card.className).toContain('se-border-green-4/50');
     });
     it('applies default border class when validated is false', () => {
         const { container } = render(_jsx(EditorCard, { itemKey: "k", validated: false, children: "child" }));

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { EditorHeader } from '../components/EditorHeader';
 describe('EditorHeader', () => {
@@ -15,10 +15,9 @@ describe('EditorHeader', () => {
         const { queryByText } = render(_jsx(EditorHeader, { title: "T", onBack: () => { } }));
         expect(queryByText('Sub')).toBeNull();
     });
-    it('calls onBack when back button is clicked', () => {
+    it('accepts deprecated onBack prop without rendering a back button', () => {
         const onBack = vi.fn();
-        const { getByText } = render(_jsx(EditorHeader, { title: "T", onBack: onBack }));
-        fireEvent.click(getByText('← Back'));
-        expect(onBack).toHaveBeenCalledOnce();
+        const { queryByText } = render(_jsx(EditorHeader, { title: "T", onBack: onBack }));
+        expect(queryByText('← Back')).toBeNull();
     });
 });

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { EditorPanelShell } from '../components/EditorPanelShell';
+// Mock ResizeObserver and pointer capture for jsdom
+vi.stubGlobal('ResizeObserver', class {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+});
+Element.prototype.setPointerCapture = vi.fn();
+Element.prototype.releasePointerCapture = vi.fn();
+describe('EditorPanelShell', () => {
+    it('applies antialiased font smoothing to the panel', () => {
+        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-antialiased');
+    });
+    it('does not render panel when closed', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: false, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel).toBeNull();
+    });
+});

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

@@ -92,6 +92,28 @@ describe('ElementHighlight', () => {
         expect(label.textContent).toContain('300');
         expect(label.textContent).toContain('150');
     });
+    it('uses at least 11px font for highlight labels', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "rgba(99,102,241,0.6)", showDimensions: true }));
+        const label = document.body.querySelector('[data-syntro-highlight-label]');
+        expect(label).toBeTruthy();
+        // showDimensions uses the smaller size (11px); non-dimensions uses 12px
+        expect(label.style.fontSize).toBe('11px');
+    });
+    it('uses 12px font for non-dimensions labels', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#ef4444", label: "Test Label" }));
+        const label = document.body.querySelector('[data-syntro-highlight-label]');
+        expect(label).toBeTruthy();
+        expect(label.style.fontSize).toBe('12px');
+    });
+    it('uses 12px font for remove button', () => {
+        const onRemove = vi.fn();
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#ef4444", label: "Test", showRemove: true, onRemove: onRemove }));
+        const removeBtn = document.body.querySelector('[data-syntro-highlight-remove]');
+        expect(removeBtn).toBeTruthy();
+        expect(removeBtn.style.fontSize).toBe('12px');
+        expect(removeBtn.style.width).toBe('16px');
+        expect(removeBtn.style.height).toBe('16px');
+    });
     it('does not show remove button when showRemove is false', () => {
         render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", label: "Test" }));
         const removeBtn = document.body.querySelector('[data-syntro-highlight-remove]');

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

@@ -1,26 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { TriggerJourney } from '../components/TriggerJourney';
 describe('TriggerJourney', () => {
-    it('returns null when status is null', () => {
-        const { container } = render(_jsx(TriggerJourney, { status: null }));
-        expect(container.innerHTML).toBe('');
+    it('renders "Always Present" when status is null', () => {
+        render(_jsx(TriggerJourney, { status: null }));
+        expect(screen.getByText('Always Present')).toBeTruthy();
     });
-    it('returns null when conditions array is empty', () => {
+    it('renders "Always Present" when conditions array is empty', () => {
         const status = { visible: true, isFallback: true, conditions: [] };
-        const { container } = render(_jsx(TriggerJourney, { status: status }));
-        expect(container.innerHTML).toBe('');
+        render(_jsx(TriggerJourney, { status: status }));
+        expect(screen.getByText('Always Present')).toBeTruthy();
     });
     it('renders a single node for one condition', () => {
         const status = {
             visible: true,
             isFallback: false,
-            conditions: [{
+            conditions: [
+                {
                     type: 'page_url',
                     passed: true,
                     formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
-                }],
+                },
+            ],
         };
         render(_jsx(TriggerJourney, { status: status }));
         expect(screen.getByText('/pricing')).toBeTruthy();
@@ -33,7 +35,11 @@ describe('TriggerJourney', () => {
                 {
                     type: 'page_url',
                     passed: true,
-                    formatted: { label: '/fine-arts/', instruction: 'Visit a /fine-arts/ page', shortLabel: '/fine-arts/' },
+                    formatted: {
+                        label: '/fine-arts/',
+                        instruction: 'Visit a /fine-arts/ page',
+                        shortLabel: '/fine-arts/',
+                    },
                 },
                 {
                     type: 'event_count',
@@ -57,7 +63,8 @@ describe('TriggerJourney', () => {
         const status = {
             visible: false,
             isFallback: false,
-            conditions: [{
+            conditions: [
+                {
                     type: 'event_count',
                     passed: false,
                     formatted: {
@@ -66,7 +73,8 @@ describe('TriggerJourney', () => {
                         shortLabel: '3+ clicks',
                         progress: { current: 1, target: 3, operator: 'gte' },
                     },
-                }],
+                },
+            ],
         };
         render(_jsx(TriggerJourney, { status: status }));
         expect(screen.getByText('1/3')).toBeTruthy();
@@ -109,15 +117,70 @@ describe('TriggerJourney', () => {
         render(_jsx(TriggerJourney, { status: status }));
         expect(screen.queryByText('All conditions met')).toBeNull();
     });
+    it('uses secondary text color and medium weight for node labels', () => {
+        const status = {
+            visible: false,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: false,
+                    formatted: { label: '/p', instruction: 'Visit pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        render(_jsx(TriggerJourney, { status: status }));
+        const label = screen.getByText('/pricing');
+        expect(label.className).toContain('se-text-text-secondary');
+        expect(label.className).not.toContain('se-text-text-tertiary');
+        expect(label.className).toContain('se-font-medium');
+    });
+    it('uses at least 11px font size for node labels', () => {
+        const status = {
+            visible: false,
+            isFallback: false,
+            conditions: [
+                {
+                    type: 'page_url',
+                    passed: false,
+                    formatted: { label: '/p', instruction: 'Visit pricing', shortLabel: '/pricing' },
+                },
+            ],
+        };
+        render(_jsx(TriggerJourney, { status: status }));
+        const label = screen.getByText('/pricing');
+        expect(label.className).toContain('se-text-[11px]');
+    });
+    it('uses secondary text color for "Always Present" label', () => {
+        render(_jsx(TriggerJourney, { status: null }));
+        const label = screen.getByText('Always Present');
+        expect(label.className).toContain('se-text-text-secondary');
+        expect(label.className).not.toContain('se-text-text-tertiary');
+    });
+    it('uses at least 12px for "All conditions met" text', () => {
+        const status = {
+            visible: true,
+            isFallback: false,
+            conditions: [
+                { type: 'a', passed: true, formatted: { label: 'a', instruction: 'A', shortLabel: 'A' } },
+                { type: 'b', passed: true, formatted: { label: 'b', instruction: 'B', shortLabel: 'B' } },
+            ],
+        };
+        const { container } = render(_jsx(TriggerJourney, { status: status }));
+        const badge = screen.getByText('All conditions met').closest('div');
+        expect(badge.className).toContain('se-text-[12px]');
+    });
     it('uses instruction as title attribute for tooltip', () => {
         const status = {
             visible: false,
             isFallback: false,
-            conditions: [{
+            conditions: [
+                {
                     type: 'page_url',
                     passed: false,
                     formatted: { label: '/p', instruction: 'Visit /pricing page', shortLabel: '/pricing' },
-                }],
+                },
+            ],
         };
         render(_jsx(TriggerJourney, { status: status }));
         const label = screen.getByText('/pricing');

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

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { formatConditionLabel } from '../formatConditionLabel';
 describe('formatConditionLabel', () => {
     it('event_count: returns label with progress data', () => {

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

@@ -15,7 +15,6 @@
  * Instructions / cancel UI should be rendered by the consumer in their own
  * panel — this component only provides the page overlay.
  */
-import React from 'react';
 export interface PickedElement {
     element: Element;
     selector: string;
@@ -27,5 +26,5 @@ export interface AnchorPickerProps {
     onCancel: () => void;
     excludeSelector?: string;
 }
-export declare function AnchorPicker({ isActive, onPick, onCancel, excludeSelector, }: AnchorPickerProps): React.ReactPortal | null;
+export declare function AnchorPicker({ isActive, onPick, onCancel, excludeSelector, }: AnchorPickerProps): import("react").ReactPortal | null;
 //# sourceMappingURL=AnchorPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AASxE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAuJ,GACxJ,EAAE,iBAAiB,4BAgMnB"}
+{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAWH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAuJ,GACxJ,EAAE,iBAAiB,sCAgMnB"}

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

@@ -103,7 +103,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
         }, children: [_jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,
-                    background: 'rgba(0, 0, 0, 0.05)',
+                    background: 'rgba(0, 0, 0, 0.08)',
                     pointerEvents: 'none',
                 } }), hoveredElement && rect && (_jsx("div", { style: {
                     position: 'fixed',
@@ -114,7 +114,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
                     border: `2px solid ${HIGHLIGHT_COLOR}`,
                     backgroundColor: HIGHLIGHT_BG,
                     borderRadius: '4px',
-                    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.15)',
+                    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
                     pointerEvents: 'none',
                     transition: 'all 0.1s ease-out',
                 } })), hoveredElement && rect && (_jsxs("div", { style: {
@@ -128,11 +128,11 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
                     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
                     zIndex: 1,
                     fontFamily: 'monospace',
-                    fontSize: '12px',
+                    fontSize: '13px',
                     maxWidth: '300px',
                     pointerEvents: 'none',
                 }, children: [_jsx("div", { style: {
-                            fontSize: '11px',
+                            fontSize: '12px',
                             textTransform: 'uppercase',
                             letterSpacing: '0.05em',
                             marginBottom: '4px',

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

@@ -1 +1 @@
-{"version":3,"file":"BeforeAfterToggle.d.ts","sourceRoot":"","sources":["../../src/components/BeforeAfterToggle.tsx"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA2B3E"}
+{"version":3,"file":"BeforeAfterToggle.d.ts","sourceRoot":"","sources":["../../src/components/BeforeAfterToggle.tsx"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA6B3E"}