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

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

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState } from 'react';
+/**
+ * Returns a live DOMRect for an element, updating on scroll, resize,
+ * and element size changes.
+ *
+ * Uses requestAnimationFrame to batch updates and avoid layout thrashing.
+ */
+export function useElementRect(element) {
+    const [rect, setRect] = useState(null);
+    const update = useCallback(() => {
+        if (element) {
+            setRect(element.getBoundingClientRect());
+        }
+    }, [element]);
+    useEffect(() => {
+        if (!element) {
+            setRect(null);
+            return;
+        }
+        // Initial measurement
+        setRect(element.getBoundingClientRect());
+        let rafId = null;
+        const scheduleUpdate = () => {
+            if (rafId != null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                update();
+            });
+        };
+        // Scroll (capture phase catches nested scroll containers)
+        window.addEventListener('scroll', scheduleUpdate, true);
+        window.addEventListener('resize', scheduleUpdate);
+        // Observe element size changes
+        const ro = new ResizeObserver(scheduleUpdate);
+        ro.observe(element);
+        return () => {
+            window.removeEventListener('scroll', scheduleUpdate, true);
+            window.removeEventListener('resize', scheduleUpdate);
+            ro.disconnect();
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [element, update]);
+    return rect;
+}

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

@@ -0,0 +1,24 @@
+import type { ShowWhenStatus } from '../components/ConditionStatusLine';
+/**
+ * Minimal type for a showWhen action item.
+ * Works with both FAQQuestionAction and NavTipAction.
+ */
+export interface ShowWhenItem {
+    id: string;
+    showWhen?: {
+        type: string;
+        rules?: Array<{
+            conditions: Array<Record<string, unknown>>;
+            value: unknown;
+        }>;
+        default?: unknown;
+    } | null;
+}
+/**
+ * Hook: live showWhen evaluation for a list of action items.
+ *
+ * @param items Array of items with id + optional showWhen
+ * @returns Map from item id → ShowWhenStatus (null for items without showWhen)
+ */
+export declare function useShowWhenStatus(items: ShowWhenItem[]): Map<string, ShowWhenStatus | null>;
+//# sourceMappingURL=useShowWhenStatus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useShowWhenStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useShowWhenStatus.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGzF;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,KAAK,CAAC;YACZ,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;YAC3C,KAAK,EAAE,OAAO,CAAC;SAChB,CAAC,CAAC;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,GAAG,IAAI,CAAC;CACV;AAuND;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC,CA0C3F"}

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

@@ -0,0 +1,215 @@
+/**
+ * useShowWhenStatus — live showWhen evaluation for editor diagnostics.
+ *
+ * Subscribes to the runtime's EventAccumulator for reactive updates.
+ * Evaluates each item's showWhen strategy locally to get
+ * per-condition breakdowns.
+ *
+ * NOTE: This hook accesses `window.SynOS.handle.runtime` directly
+ * because EditorPanelProps doesn't expose runtime. This is safe —
+ * the editor only runs after runtime bootstrap.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { formatConditionLabel } from '../formatConditionLabel';
+function getRuntime() {
+    return window.SynOS?.handle?.runtime ?? null;
+}
+/**
+ * Evaluate a single condition against the runtime context.
+ */
+function evaluateConditionLocally(condition, runtime) {
+    const ctx = runtime.context.get();
+    const type = condition.type;
+    let passed = false;
+    let accCount;
+    switch (type) {
+        case 'event_count': {
+            if (!runtime.accumulator)
+                break;
+            const key = condition.key;
+            const withinMs = condition.withinMs;
+            const count = runtime.accumulator.getCount(key, withinMs);
+            accCount = count;
+            const target = condition.count;
+            const op = condition.operator;
+            switch (op) {
+                case 'gte':
+                    passed = count >= target;
+                    break;
+                case 'lte':
+                    passed = count <= target;
+                    break;
+                case 'eq':
+                    passed = count === target;
+                    break;
+                case 'gt':
+                    passed = count > target;
+                    break;
+                case 'lt':
+                    passed = count < target;
+                    break;
+            }
+            break;
+        }
+        case 'page_url': {
+            const url = condition.url;
+            const pattern = url
+                .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+                .replace(/\*\*/g, '.*')
+                .replace(/\*/g, '[^/]*');
+            passed = new RegExp(`^${pattern}$`).test(ctx.page.url);
+            break;
+        }
+        case 'route':
+            passed = ctx.page.routeId === condition.routeId;
+            break;
+        case 'anchor_visible': {
+            const anchors = ctx.anchors;
+            const anchor = anchors?.find((a) => a.anchorId === condition.anchorId);
+            switch (condition.state) {
+                case 'visible':
+                    passed = anchor?.visible === true;
+                    break;
+                case 'present':
+                    passed = anchor?.present === true;
+                    break;
+                case 'absent':
+                    passed = !anchor?.present;
+                    break;
+            }
+            break;
+        }
+        case 'event_occurred':
+            passed =
+                runtime.events?.hasRecentEvent(condition.eventName, condition.withinMs ?? 60000) ?? false;
+            break;
+        case 'viewport': {
+            const { width, height } = ctx.viewport;
+            passed = true;
+            if (condition.minWidth !== undefined && width < condition.minWidth)
+                passed = false;
+            if (condition.maxWidth !== undefined && width > condition.maxWidth)
+                passed = false;
+            if (condition.minHeight !== undefined && height < condition.minHeight)
+                passed = false;
+            if (condition.maxHeight !== undefined && height > condition.maxHeight)
+                passed = false;
+            break;
+        }
+        case 'session_metric': {
+            const val = runtime.state?.getSessionMetric(condition.key) ?? 0;
+            const threshold = condition.threshold;
+            const op = condition.operator;
+            switch (op) {
+                case 'gte':
+                    passed = val >= threshold;
+                    break;
+                case 'lte':
+                    passed = val <= threshold;
+                    break;
+                case 'eq':
+                    passed = val === threshold;
+                    break;
+                case 'gt':
+                    passed = val > threshold;
+                    break;
+                case 'lt':
+                    passed = val < threshold;
+                    break;
+            }
+            break;
+        }
+        case 'dismissed':
+            passed = condition.inverted
+                ? !(runtime.state?.isDismissed(condition.key) ?? false)
+                : (runtime.state?.isDismissed(condition.key) ?? false);
+            break;
+        case 'cooldown_active':
+            passed = condition.inverted
+                ? !(runtime.state?.isCooldownActive(condition.key) ?? false)
+                : (runtime.state?.isCooldownActive(condition.key) ?? false);
+            break;
+        case 'frequency_limit': {
+            const count = runtime.state?.getFrequencyCount(condition.key) ?? 0;
+            const limitReached = count >= condition.limit;
+            passed = condition.inverted ? !limitReached : limitReached;
+            break;
+        }
+    }
+    const formatted = formatConditionLabel(condition, accCount);
+    return {
+        passed,
+        cs: { type, passed, formatted },
+    };
+}
+/**
+ * Evaluate all conditions in a showWhen RuleStrategy.
+ */
+function evaluateShowWhen(showWhen, runtime) {
+    if (showWhen.type !== 'rules' || !showWhen.rules?.length) {
+        return { visible: !!showWhen.default, isFallback: true, conditions: [] };
+    }
+    // Evaluate ALL rules' conditions for diagnostic display
+    const allConditions = [];
+    for (const rule of showWhen.rules) {
+        let ruleMatched = true;
+        for (const condition of rule.conditions) {
+            const { passed, cs } = evaluateConditionLocally(condition, runtime);
+            allConditions.push(cs);
+            if (!passed)
+                ruleMatched = false;
+        }
+        if (ruleMatched) {
+            return { visible: rule.value, isFallback: false, conditions: allConditions };
+        }
+    }
+    // No rules matched — use default
+    return {
+        visible: showWhen.default ?? false,
+        isFallback: true,
+        conditions: allConditions,
+    };
+}
+/**
+ * Hook: live showWhen evaluation for a list of action items.
+ *
+ * @param items Array of items with id + optional showWhen
+ * @returns Map from item id → ShowWhenStatus (null for items without showWhen)
+ */
+export function useShowWhenStatus(items) {
+    const [statuses, setStatuses] = useState(new Map());
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    const evaluate = useCallback(() => {
+        const runtime = getRuntime();
+        if (!runtime)
+            return;
+        const map = new Map();
+        for (const item of itemsRef.current) {
+            if (!item.showWhen) {
+                map.set(item.id, null);
+            }
+            else {
+                map.set(item.id, evaluateShowWhen(item.showWhen, runtime));
+            }
+        }
+        setStatuses(map);
+    }, []);
+    useEffect(() => {
+        // Initial evaluation
+        evaluate();
+        // Subscribe to accumulator changes for reactive event_count updates
+        const runtime = getRuntime();
+        const unsubs = [];
+        if (runtime?.accumulator) {
+            unsubs.push(runtime.accumulator.subscribe(evaluate));
+        }
+        // Poll every 2s for non-accumulator conditions (page_url, viewport, etc.)
+        const interval = setInterval(evaluate, 2000);
+        return () => {
+            unsubs.forEach((u) => u());
+            clearInterval(interval);
+        };
+    }, [evaluate]);
+    return statuses;
+}

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

@@ -0,0 +1,33 @@
+export { cn } from './cn';
+export type { AnchorPickerProps, PickedElement } from './components/AnchorPicker';
+export { AnchorPicker } from './components/AnchorPicker';
+export { BeforeAfterToggle } from './components/BeforeAfterToggle';
+export type { ConditionStatus, ShowWhenStatus } from './components/ConditionStatusLine';
+export { ConditionStatusLine } from './components/ConditionStatusLine';
+export { DetectionBadge } from './components/DetectionBadge';
+export { DismissedSection } from './components/DismissedSection';
+export { EditBackButton } from './components/EditBackButton';
+export { EditorBody } from './components/EditorBody';
+export { EditorCard } from './components/EditorCard';
+export { EditorFooter } from './components/EditorFooter';
+export { EditorHeader } from './components/EditorHeader';
+export { EditorInput } from './components/EditorInput';
+export { EditorLayout } from './components/EditorLayout';
+export type { EditorPanelShellProps } from './components/EditorPanelShell';
+export { EditorPanelShell } from './components/EditorPanelShell';
+export { EditorSelect } from './components/EditorSelect';
+export { EditorTextarea } from './components/EditorTextarea';
+export type { ElementHighlightProps } from './components/ElementHighlight';
+export { ElementHighlight } from './components/ElementHighlight';
+export { EmptyState } from './components/EmptyState';
+export type { TriggerJourneyProps } from './components/TriggerJourney';
+export { TriggerJourney } from './components/TriggerJourney';
+export { GroupHeader } from './components/GroupHeader';
+export type { ConditionProgress, FormattedCondition } from './formatConditionLabel';
+export { formatConditionLabel } from './formatConditionLabel';
+export { useElementRect } from './hooks/useElementRect';
+export type { ShowWhenItem } from './hooks/useShowWhenStatus';
+export { useShowWhenStatus } from './hooks/useShowWhenStatus';
+export type { SelectorOptions } from './utils/selectorGenerator';
+export { generateSelector, getElementDescription, validateSelector, } from './utils/selectorGenerator';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC"}

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

@@ -0,0 +1,24 @@
+export { cn } from './cn';
+export { AnchorPicker } from './components/AnchorPicker';
+export { BeforeAfterToggle } from './components/BeforeAfterToggle';
+export { ConditionStatusLine } from './components/ConditionStatusLine';
+export { DetectionBadge } from './components/DetectionBadge';
+export { DismissedSection } from './components/DismissedSection';
+export { EditBackButton } from './components/EditBackButton';
+export { EditorBody } from './components/EditorBody';
+export { EditorCard } from './components/EditorCard';
+export { EditorFooter } from './components/EditorFooter';
+export { EditorHeader } from './components/EditorHeader';
+export { EditorInput } from './components/EditorInput';
+export { EditorLayout } from './components/EditorLayout';
+export { EditorPanelShell } from './components/EditorPanelShell';
+export { EditorSelect } from './components/EditorSelect';
+export { EditorTextarea } from './components/EditorTextarea';
+export { ElementHighlight } from './components/ElementHighlight';
+export { EmptyState } from './components/EmptyState';
+export { TriggerJourney } from './components/TriggerJourney';
+export { GroupHeader } from './components/GroupHeader';
+export { formatConditionLabel } from './formatConditionLabel';
+export { useElementRect } from './hooks/useElementRect';
+export { useShowWhenStatus } from './hooks/useShowWhenStatus';
+export { generateSelector, getElementDescription, validateSelector, } from './utils/selectorGenerator';

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

@@ -0,0 +1,22 @@
+export interface SelectorOptions {
+    includeTag?: boolean;
+    preferTestIds?: boolean;
+    maxCombinations?: number;
+}
+/**
+ * Generates a CSS selector for a given DOM element.
+ * Uses css-selector-generator with settings optimized for:
+ * - Stability (prefers IDs, data-testid, stable classes)
+ * - Readability (includes tag names)
+ * - Uniqueness (generates unique selectors)
+ */
+export declare function generateSelector(element: Element, options?: SelectorOptions): string;
+/**
+ * Validates that a selector correctly targets the expected element.
+ */
+export declare function validateSelector(selector: string, expectedElement: Element): boolean;
+/**
+ * Gets a human-readable description of an element for UI display.
+ */
+export declare function getElementDescription(element: Element): string;
+//# sourceMappingURL=selectorGenerator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectorGenerator.d.ts","sourceRoot":"","sources":["../../src/utils/selectorGenerator.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM,CAiExF;AAmCD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,GAAG,OAAO,CAOpF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAiB9D"}

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

@@ -0,0 +1,143 @@
+import { getCssSelector } from 'css-selector-generator';
+const DEFAULT_OPTIONS = {
+    includeTag: true,
+    preferTestIds: true,
+    maxCombinations: 100,
+};
+/**
+ * Generates a CSS selector for a given DOM element.
+ * Uses css-selector-generator with settings optimized for:
+ * - Stability (prefers IDs, data-testid, stable classes)
+ * - Readability (includes tag names)
+ * - Uniqueness (generates unique selectors)
+ */
+export function generateSelector(element, options = {}) {
+    const opts = { ...DEFAULT_OPTIONS, ...options };
+    // Build selector types in priority order
+    const selectors = [];
+    // Always prioritize ID if available
+    selectors.push('id');
+    // Include data-testid and other stable attributes
+    if (opts.preferTestIds) {
+        selectors.push('attribute');
+    }
+    // Then class names (filtered to exclude dynamic ones)
+    selectors.push('class');
+    // Tag names for context
+    selectors.push('tag');
+    // Fallbacks for uniqueness
+    selectors.push('nthchild');
+    selectors.push('nthoftype');
+    try {
+        const selector = getCssSelector(element, {
+            selectors,
+            includeTag: opts.includeTag,
+            maxCombinations: opts.maxCombinations,
+            // Blacklist common dynamic class patterns
+            blacklist: [
+                // Dynamic class patterns
+                /^[a-z]+-[a-f0-9]{5,}$/i, // hash-based classes like "css-1abc23"
+                /^_[a-zA-Z0-9]+$/, // CSS module classes like "_1abc23"
+                /^svelte-[a-z0-9]+$/i, // Svelte scoped classes
+                /^vue-[a-z0-9]+$/i, // Vue scoped classes
+                /^emotion-[0-9]+$/, // Emotion CSS-in-JS
+                /^sc-[a-zA-Z]+$/, // styled-components
+                // State classes that may change
+                /^(is-|has-|js-)/,
+                /^(active|selected|focused|disabled|hidden|visible)$/,
+                // Animation/transition classes
+                /^(fade|slide|animate)/,
+                /-(enter|leave|active)(-active|-done)?$/,
+            ],
+            // Whitelist stable attribute selectors
+            whitelist: [
+                /^data-testid$/,
+                /^data-cy$/,
+                /^data-test$/,
+                /^data-qa$/,
+                /^aria-label$/,
+                /^role$/,
+                /^name$/,
+                /^type$/,
+                /^href$/,
+            ],
+        });
+        return selector;
+    }
+    catch (error) {
+        console.warn('[SelectorGenerator] Failed to generate selector:', error);
+        // Fallback: try simpler approach
+        return generateFallbackSelector(element);
+    }
+}
+/**
+ * Fallback selector generation when the library fails.
+ * Creates a path-based selector from the element to the body.
+ */
+function generateFallbackSelector(element) {
+    const path = [];
+    let current = element;
+    while (current && current !== document.body && current !== document.documentElement) {
+        let selector = current.tagName.toLowerCase();
+        // Add ID if present
+        if (current.id) {
+            selector = `#${CSS.escape(current.id)}`;
+            path.unshift(selector);
+            break; // ID is unique enough
+        }
+        // Add nth-child for specificity
+        const parent = current.parentElement;
+        if (parent) {
+            const siblings = Array.from(parent.children);
+            const index = siblings.indexOf(current) + 1;
+            selector += `:nth-child(${index})`;
+        }
+        path.unshift(selector);
+        current = parent;
+    }
+    return path.join(' > ');
+}
+/**
+ * Validates that a selector correctly targets the expected element.
+ */
+export function validateSelector(selector, expectedElement) {
+    try {
+        const matched = document.querySelector(selector);
+        return matched === expectedElement;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Gets a human-readable description of an element for UI display.
+ */
+export function getElementDescription(element) {
+    const tag = element.tagName.toLowerCase();
+    const id = element.id ? `#${element.id}` : '';
+    const classes = element.className && typeof element.className === 'string'
+        ? `.${element.className
+            .split(' ')
+            .filter((c) => c && !isDynamicClass(c))
+            .slice(0, 2)
+            .join('.')}`
+        : '';
+    // Get text content preview
+    const text = element.textContent?.trim().slice(0, 30) || '';
+    const textPreview = text ? ` "${text}${text.length >= 30 ? '...' : ''}"` : '';
+    return `${tag}${id}${classes}${textPreview}`.trim();
+}
+/**
+ * Checks if a class name appears to be dynamically generated.
+ */
+function isDynamicClass(className) {
+    const dynamicPatterns = [
+        /^[a-z]+-[a-f0-9]{5,}$/i,
+        /^_[a-zA-Z0-9]+$/,
+        /^svelte-[a-z0-9]+$/i,
+        /^vue-[a-z0-9]+$/i,
+        /^emotion-[0-9]+$/,
+        /^sc-[a-zA-Z]+$/,
+    ];
+    return dynamicPatterns.some((pattern) => pattern.test(className));
+}

package/node_modules/@syntrologie/shared-editor-ui/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@syntrologie/shared-editor-ui",
+  "version": "0.0.0-semantically-released",
+  "description": "Shared UI components for adaptive editor panels",
+  "license": "Proprietary",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "css-selector-generator": "^3.8.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "lucide-react": ">=0.400.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntrologie/adapt-nav",
-  "version": "2.1.0",
+  "version": "2.2.0-canary.2",
   "description": "Adaptive Navigation - Nav link widget, scroll-to and page navigation actions",
   "license": "Proprietary",
   "private": false,
@@ -8,7 +8,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/SyntropyForge/amazing-demos.git",
-    "directory": "tech-core/sdks/adaptives/adaptive-nav"
+    "directory": "packages/adaptives/adaptive-nav"
   },
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,12 @@
   "files": [
     "dist"
   ],
+  "bundledDependencies": [
+    "@syntro/design-system",
+    "@syntrologie/shared-editor-ui"
+  ],
   "scripts": {
+    "prepack": "node ../../../scripts/prepare-bundled-deps.mjs",
     "build": "tsc",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist",
@@ -39,23 +44,23 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@syntrologie/runtime-sdk": "^2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "zod": "^3.0.0"
   },
   "dependencies": {
     "@syntrologie/shared-editor-ui": "*",
-    "@syntro/design-system": "^1.0.0"
+    "@syntro/design-system": "*",
+    "@syntrologie/sdk-contracts": "*"
   },
   "devDependencies": {
-    "@types/react": "^19.1.0",
-    "typescript": "^5.7.3",
+    "@types/react": "^19.2.0",
+    "typescript": "^5.9.3",
     "zod": "^3.25.76",
     "@testing-library/react": "^16.3.2",
-    "jsdom": "^25.0.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "vitest": "^2.1.9"
+    "jsdom": "^26.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vitest": "^4.0.18"
   }
 }