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

package/dist/highlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../src/highlight.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,IAAI,IAAI,CAAA;CAAE,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,IAAI,CAAC,EAAE,gBAAgB,GACtB,eAAe,CAmKjB"}
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../src/highlight.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,IAAI,IAAI,CAAA;CAAE,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,IAAI,CAAC,EAAE,gBAAgB,GACtB,eAAe,CAyKjB"}

package/dist/highlight.js

@@ -57,6 +57,12 @@ export function showHighlight(anchorEl, overlayRoot, opts) {
         scrim.style.webkitClipPath = path;
     };
     const update = () => {
+        // Guard: if anchor was removed from DOM (e.g. React Router navigation),
+        // destroy the overlay gracefully instead of positioning at (0,0).
+        if (!anchorEl.isConnected) {
+            handle.destroy();
+            return;
+        }
         const rect = anchorEl.getBoundingClientRect();
         const x = Math.max(0, rect.left - padding);
         const y = Math.max(0, rect.top - padding);

package/dist/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,aAAa,GAAG;IAAE,OAAO,IAAI,IAAI,CAAC;IAAC,EAAE,EAAE,WAAW,CAAA;CAAE,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAyCD,wBAAgB,WAAW,CACzB,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,cAAc,GACnB,aAAa,CA+Of"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,aAAa,GAAG;IAAE,OAAO,IAAI,IAAI,CAAC;IAAC,EAAE,EAAE,WAAW,CAAA;CAAE,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAyCD,wBAAgB,WAAW,CACzB,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,cAAc,GACnB,aAAa,CAsPf"}

package/dist/tooltip.js

@@ -102,9 +102,16 @@ export function showTooltip(anchorEl, overlayRoot, opts) {
     ];
     const placement = opts.placement && opts.placement !== 'auto' ? opts.placement : 'top';
     const cleanup = autoUpdate(anchorEl, div, async () => {
+        // Guard: if anchor was removed from DOM (e.g. React Router navigation),
+        // destroy the overlay gracefully instead of positioning at stale coords.
+        if (!anchorEl.isConnected) {
+            handle.destroy();
+            return;
+        }
         const currentAnchorRef = getAnchorReference(anchorEl);
         const result = await computePosition(currentAnchorRef, div, {
             placement,
+            strategy: 'fixed',
             middleware,
         });
         const { x, y, strategy, middlewareData, placement: finalPlacement } = result;

package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,MAAM,CA2bxC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,MAAM,CAgdxC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/node_modules/@syntro/design-system/dist/tailwind-preset.js

@@ -147,29 +147,34 @@ export const syntroPreset = {
                     DEFAULT: colors.pink[4],
                 },
                 // Semantic tokens
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 text: {
                     primary: colors.text.primary,
                     secondary: colors.text.secondary,
                     tertiary: colors.text.tertiary,
                     DEFAULT: colors.text.primary,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 background: {
                     primary: colors.background.primary,
                     secondary: colors.background.secondary,
                     DEFAULT: colors.background.primary,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 border: {
                     primary: colors.border.primary,
                     secondary: colors.border.secondary,
                     DEFAULT: colors.border.primary,
                 },
                 // Component tokens - Button
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'btn-primary': {
                     DEFAULT: colors.button.primary.backgroundDefault,
                     hover: colors.button.primary.backgroundHover,
                     text: colors.button.primary.text,
                     border: colors.button.primary.border,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'btn-neutral': {
                     DEFAULT: colors.button.neutral.background,
                     text: colors.button.neutral.text,
@@ -189,12 +194,14 @@ export const syntroPreset = {
                     hover: colors.button.success.hover,
                 },
                 // Component tokens - Card
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 card: {
                     bg: colors.card.background,
                     content: colors.card.content,
                     border: colors.card.border,
                 },
                 // Component tokens - Modal
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 modal: {
                     bg: colors.modal.background,
                     content: colors.modal.content,
@@ -211,6 +218,7 @@ export const syntroPreset = {
                     'content-tertiary': colors.sidebar.contentTertiary,
                 },
                 // Component tokens - Tab
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 tab: {
                     'active-bg': colors.tab.activeBackground,
                     'active-content': colors.tab.activeContent,
@@ -218,15 +226,17 @@ export const syntroPreset = {
                     border: colors.tab.border,
                 },
                 // Component tokens - Table
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'table-header': {
                     text: colors.table.header.textDefault,
                     'text-hover': colors.table.header.textHover,
                     bg: colors.table.header.backgroundDefault,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'table-cell': {
-                    // biome-ignore lint/plugin: These define semantic token names, not usage of shadcn color classes
+                    // biome-ignore lint: Tailwind preset defines semantic token names, not usage of shadcn color classes
                     'text-primary': colors.table.cell.textPrimary,
-                    // biome-ignore lint/plugin: These define semantic token names, not usage of shadcn color classes
+                    // biome-ignore lint: Tailwind preset defines semantic token names, not usage of shadcn color classes
                     'text-secondary': colors.table.cell.textSecondary,
                     bg: colors.table.cell.backgroundDefault,
                     'bg-hover': colors.table.cell.backgroundHover,
@@ -245,54 +255,63 @@ export const syntroPreset = {
                     'border-error': colors.inputField.borderError,
                 },
                 // Component tokens - Badge (9 variants)
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-slate': {
                     content: colors.badge.slateGrey.content,
                     outline: colors.badge.slateGrey.pillOutline,
                     border: colors.badge.slateGrey.borderPrimary,
                     bg: colors.badge.slateGrey.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-brand': {
                     content: colors.badge.brand.content,
                     outline: colors.badge.brand.pillOutline,
                     border: colors.badge.brand.borderPrimary,
                     bg: colors.badge.brand.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-green': {
                     content: colors.badge.green.content,
                     outline: colors.badge.green.pillOutline,
                     border: colors.badge.green.borderPrimary,
                     bg: colors.badge.green.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-yellow': {
                     content: colors.badge.yellow.content,
                     outline: colors.badge.yellow.pillOutline,
                     border: colors.badge.yellow.borderPrimary,
                     bg: colors.badge.yellow.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-red': {
                     content: colors.badge.red.content,
                     outline: colors.badge.red.pillOutline,
                     border: colors.badge.red.borderPrimary,
                     bg: colors.badge.red.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-blue': {
                     content: colors.badge.blue.content,
                     outline: colors.badge.blue.pillOutline,
                     border: colors.badge.blue.borderPrimary,
                     bg: colors.badge.blue.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-purple': {
                     content: colors.badge.purple.content,
                     outline: colors.badge.purple.pillOutline,
                     border: colors.badge.purple.borderPrimary,
                     bg: colors.badge.purple.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-orange': {
                     content: colors.badge.orange.content,
                     outline: colors.badge.orange.pillOutline,
                     border: colors.badge.orange.borderPrimary,
                     bg: colors.badge.orange.background,
                 },
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 'badge-pink': {
                     content: colors.badge.pink.content,
                     outline: colors.badge.pink.pillOutline,
@@ -309,6 +328,7 @@ export const syntroPreset = {
                     'on-bg-hover': colors.toggle.on.backgroundHover,
                 },
                 // Component tokens - Menu
+                // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
                 menu: {
                     DEFAULT: colors.menu.backgroundDefault,
                     hover: colors.menu.backgroundHover,
@@ -380,6 +400,7 @@ export const syntroPreset = {
                 'focus-error': focusRings.error,
             },
             // Backdrop blur — Figma scale
+            // biome-ignore lint: Tailwind preset intentionally maps design tokens from source
             backdropBlur: {
                 sm: backdropBlur.sm,
                 md: backdropBlur.md,

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', () => {