@syntrologie/adapt-nav 2.8.0-canary.13 → 2.8.0-canary.131

package/dist/NavWidget.d.ts

@@ -25,7 +25,7 @@ export declare const NavMountableWidget: {
     mount(container: HTMLElement, config?: NavConfig & {
         runtime?: NavWidgetRuntime;
         instanceId?: string;
-    }): () => void;
+    }): (() => void) | undefined;
 };
 export default NavWidget;
 //# sourceMappingURL=NavWidget.d.ts.map

package/dist/NavWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavWidget.d.ts","sourceRoot":"","sources":["../src/NavWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,OAAO,KAAK,EAAE,SAAS,EAAgB,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA+UzF;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CA8NxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CAiD3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"NavWidget.d.ts","sourceRoot":"","sources":["../src/NavWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,OAAO,KAAK,EAAE,SAAS,EAAgB,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAkVzF;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CA8NxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CA2B3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/NavWidget.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { purple, slateGrey } from '@syntro/design-system/tokens';
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { createRoot } from 'react-dom/client';
+import { navigateWithFrameworkRouter } from './runtime';
 // ============================================================================
 // Emoji → Lucide SVG inline mapping (no lucide-react dependency)
 // ============================================================================
@@ -144,7 +145,8 @@ const themeStyles = {
             color: 'var(--sc-content-text-secondary-color)',
         },
         linkButton: {
-            backgroundColor: 'var(--sc-color-primary, #6366f1)',
+            // purple[4] = #6a59ce — design system primary purple, used as fallback when --sc-color-primary is not set
+            backgroundColor: `var(--sc-color-primary, ${purple[4]})`,
             color: '#ffffff',
         },
         categoryHeader: {
@@ -177,7 +179,8 @@ const themeStyles = {
             color: 'var(--sc-content-text-secondary-color)',
         },
         linkButton: {
-            backgroundColor: 'var(--sc-color-primary, #6366f1)',
+            // purple[4] = #6a59ce — design system primary purple, used as fallback when --sc-color-primary is not set
+            backgroundColor: `var(--sc-color-primary, ${purple[4]})`,
             color: '#ffffff',
         },
         categoryHeader: {
@@ -266,7 +269,9 @@ function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, onFocusAnc
     };
     // CTA label
     const ctaLabel = isFocusAction ? `Focus \u2192` : external ? `Go \u2197` : `Go \u2192`;
-    return (_jsxs("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && (_jsx("span", { style: baseStyles.icon, dangerouslySetInnerHTML: { __html: renderIcon(icon) } })), _jsx("span", { children: title }), _jsx("span", { style: chevronStyle, children: '\u203A' })] }), _jsxs("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx("p", { style: baseStyles.description, children: description }), hasAction && (_jsx("a", { href: effectiveHref || '#', onClick: handleLinkClick, style: { ...baseStyles.linkButton, ...colors.linkButton }, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: ctaLabel }))] })] }));
+    return (_jsxs("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && (
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: renderIcon returns sanitized SVG from EMOJI_SVG_MAP or escapeHtml
+                    _jsx("span", { style: baseStyles.icon, dangerouslySetInnerHTML: { __html: renderIcon(icon) } })), _jsx("span", { children: title }), _jsx("span", { style: chevronStyle, children: '\u203A' })] }), _jsxs("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx("p", { style: baseStyles.description, children: description }), hasAction && (_jsx("a", { href: effectiveHref || '#', onClick: handleLinkClick, style: { ...baseStyles.linkButton, ...colors.linkButton }, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: ctaLabel }))] })] }));
 }
 // ============================================================================
 // NavWidget Component
@@ -392,14 +397,14 @@ export function NavWidget({ config, runtime, instanceId }) {
             window.open(href, '_blank', 'noopener,noreferrer');
         }
         else {
-            // SPA navigation: pushState updates the URL, then popstate tells the
-            // host app's router (e.g. React Router) to render the new page.
-            // Cleanup functions in revertAll() are resilient to detached DOM nodes,
-            // so no timing hack is needed between pushState and popstate.
+            // Try the host framework's native router first (Next.js, Nuxt, etc.)
+            // Falls back to pushState for vanilla SPAs.
             const url = new URL(href, window.location.origin);
             url.search = window.location.search;
-            window.history.pushState(null, '', url.toString());
-            window.dispatchEvent(new PopStateEvent('popstate'));
+            if (!navigateWithFrameworkRouter(url.toString())) {
+                window.history.pushState(null, '', url.toString());
+                window.dispatchEvent(new PopStateEvent('popstate'));
+            }
         }
     }, [runtime.events, instanceId]);
     // Handle same-page anchor focus: scroll + pulse + focus
@@ -466,24 +471,6 @@ export const NavMountableWidget = {
                 root.unmount();
             };
         }
-        // HTML fallback for non-React environments
-        const tips = navConfig.actions || [];
-        container.innerHTML = `
-      <div style="font-family: system-ui; max-width: 100%;">
-        ${tips
-            .map((tip) => `
-          <div style="margin-bottom: 4px; padding: 12px 16px; background: ${slateGrey[12]}; border-radius: 8px;">
-            ${tip.config.icon ? `<span>${renderIcon(tip.config.icon)}</span> ` : ''}<strong>${escapeHtml(tip.config.title)}</strong>
-            <p style="margin-top: 8px; color: ${slateGrey[6]}; font-size: 13px;">${escapeHtml(tip.config.description)}</p>
-            ${tip.config.href ? `<a href="${escapeHtml(tip.config.href)}" style="color: ${purple[2]}; font-size: 13px;">Go &rarr;</a>` : ''}
-          </div>
-        `)
-            .join('')}
-      </div>
-    `;
-        return () => {
-            container.innerHTML = '';
-        };
     },
 };
 export default NavWidget;

package/dist/NavWidgetLit.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Adaptive Nav - NavWidgetLit Web Component
+ *
+ * Lit web component equivalent of NavWidget.tsx. Renders a collapsible
+ * navigation tips accordion with per-item conditional visibility, framework-aware
+ * navigation, and CSS variable theming.
+ *
+ * Decorator-free: uses `static override properties` (tsconfig has no
+ * experimentalDecorators).
+ *
+ * Uses light DOM (createRenderRoot returns this) so host-page CSS variables
+ * (--sc-*) are inherited without crossing a shadow boundary.
+ */
+import { LitElement } from 'lit';
+import type { NavConfig, NavWidgetRuntime } from './types';
+export declare class NavWidgetLit extends LitElement {
+    #private;
+    createRenderRoot(): this;
+    static properties: {
+        config: {
+            attribute: boolean;
+        };
+        runtime: {
+            attribute: boolean;
+        };
+        instanceId: {
+            type: StringConstructor;
+        };
+        _expandedIds: {
+            state: boolean;
+        };
+        _renderTick: {
+            state: boolean;
+        };
+        _hoveredId: {
+            state: boolean;
+        };
+    };
+    config: NavConfig;
+    runtime: NavWidgetRuntime | undefined;
+    instanceId: string;
+    /** @internal */ _expandedIds: Set<string>;
+    /** @internal */ _renderTick: number;
+    /** @internal */ _hoveredId: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare function registerNavWidgetLit(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syntro-nav-tips': NavWidgetLit;
+    }
+}
+//# sourceMappingURL=NavWidgetLit.d.ts.map

package/dist/NavWidgetLit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavWidgetLit.d.ts","sourceRoot":"","sources":["../src/NavWidgetLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,SAAS,EAAgB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAqGzE,qBAAa,YAAa,SAAQ,UAAU;;IAGjC,gBAAgB;IAMzB,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;MAUxB;IAIF,MAAM,EAAE,SAAS,CAA4D;IAC7E,OAAO,EAAE,gBAAgB,GAAG,SAAS,CAAa;IAClD,UAAU,EAAE,MAAM,CAAgB;IAIlC,gBAAgB,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAa;IACvD,gBAAgB,CAAC,WAAW,SAAK;IACjC,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IASzC,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA0T5C,MAAM;CAuFhB;AAQD,wBAAgB,oBAAoB,IAAI,IAAI,CAK3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}

package/dist/NavWidgetLit.js

@@ -0,0 +1,495 @@
+/**
+ * Adaptive Nav - NavWidgetLit Web Component
+ *
+ * Lit web component equivalent of NavWidget.tsx. Renders a collapsible
+ * navigation tips accordion with per-item conditional visibility, framework-aware
+ * navigation, and CSS variable theming.
+ *
+ * Decorator-free: uses `static override properties` (tsconfig has no
+ * experimentalDecorators).
+ *
+ * Uses light DOM (createRenderRoot returns this) so host-page CSS variables
+ * (--sc-*) are inherited without crossing a shadow boundary.
+ */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _NavWidgetLit_instances, _NavWidgetLit_contextUnsub, _NavWidgetLit_accumulatorUnsub, _NavWidgetLit_subscribeRuntime, _NavWidgetLit_unsubscribeRuntime, _NavWidgetLit_getVisibleTips, _NavWidgetLit_getResolvedTheme, _NavWidgetLit_handleToggle, _NavWidgetLit_handleNavigate, _NavWidgetLit_handleFocusAnchor, _NavWidgetLit_publishEvent, _NavWidgetLit_renderTipItem;
+import { html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { navigateWithFrameworkRouter } from './runtime';
+// ============================================================================
+// Design system token fallbacks (inlined to avoid bundling @syntro/design-system
+// as a hard dep for this file; values match packages/design-system/src/tokens/colors.ts)
+// ============================================================================
+const TOKEN_PURPLE_4 = '#6a59ce';
+const TOKEN_SLATE_GREY_7 = '#677384';
+const TOKEN_SLATE_GREY_8 = '#87919f';
+// ============================================================================
+// Emoji → Lucide SVG inline mapping (matches NavWidget.tsx EMOJI_SVG_MAP)
+// ============================================================================
+const EMOJI_SVG_MAP = {
+    '💵': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>',
+    '🏛️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>',
+    '⏭️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" x2="19" y1="5" y2="19"/></svg>',
+    '➡️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
+    '💡': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>',
+    '💰': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>',
+    '📋': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>',
+    '✅': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
+    '⚠️': '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+};
+// ============================================================================
+// Sanitization helpers
+// ============================================================================
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function renderIcon(emoji) {
+    return EMOJI_SVG_MAP[emoji] ?? escapeHtml(emoji);
+}
+// ============================================================================
+// Route matching helper
+// ============================================================================
+function routeMatchesCurrent(routes) {
+    if (typeof window === 'undefined')
+        return false;
+    const current = window.location.pathname;
+    return routes.some((route) => {
+        const routePath = route.split('?')[0].split('#')[0];
+        if (routePath.endsWith('/**')) {
+            return current.startsWith(routePath.slice(0, -3));
+        }
+        return current === routePath;
+    });
+}
+// ============================================================================
+// Pulse animation helper
+// ============================================================================
+function pulseElement(el) {
+    const keyframes = [
+        { boxShadow: '0 0 0 0 rgba(13, 148, 136, 0.5)' },
+        { boxShadow: '0 0 0 8px rgba(13, 148, 136, 0)' },
+    ];
+    el.animate(keyframes, { duration: 600, iterations: 3, easing: 'ease-out' });
+}
+function resolveTheme(theme) {
+    if (theme === 'dark')
+        return 'dark';
+    if (theme === 'light')
+        return 'light';
+    // auto or undefined: detect system preference
+    if (typeof window !== 'undefined') {
+        return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+}
+// ============================================================================
+// NavWidgetLit — LitElement
+// ============================================================================
+export class NavWidgetLit extends LitElement {
+    constructor() {
+        // ---------- No shadow DOM — inherit host CSS variables --------------------
+        super(...arguments);
+        _NavWidgetLit_instances.add(this);
+        // ---------- Public properties --------------------------------------------
+        this.config = { expandBehavior: 'single', theme: 'auto', actions: [] };
+        this.runtime = undefined;
+        this.instanceId = 'nav-widget';
+        // ---------- Internal state -----------------------------------------------
+        /** @internal */ this._expandedIds = new Set();
+        /** @internal */ this._renderTick = 0;
+        /** @internal */ this._hoveredId = null;
+        // ---------- Private subscriptions ----------------------------------------
+        _NavWidgetLit_contextUnsub.set(this, null);
+        _NavWidgetLit_accumulatorUnsub.set(this, null);
+    }
+    createRenderRoot() {
+        return this;
+    }
+    // ---------- Lifecycle: connectedCallback ---------------------------------
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_subscribeRuntime).call(this);
+    }
+    // ---------- Lifecycle: disconnectedCallback ------------------------------
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_unsubscribeRuntime).call(this);
+    }
+    // ---------- Lifecycle: updated -------------------------------------------
+    updated(changed) {
+        if (changed.has('runtime')) {
+            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_unsubscribeRuntime).call(this);
+            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_subscribeRuntime).call(this);
+        }
+    }
+    // ---------- Render --------------------------------------------------------
+    render() {
+        const visibleTips = __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_getVisibleTips).call(this);
+        const theme = __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_getResolvedTheme).call(this);
+        const containerStyle = styleMap({
+            fontFamily: 'var(--sc-font-family, system-ui, -apple-system, sans-serif)',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            backgroundColor: 'transparent',
+            color: 'inherit',
+        });
+        const accordionStyle = styleMap({
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--sc-content-item-gap, 6px)',
+        });
+        const categoryHeaderStyle = styleMap({
+            fontSize: 'var(--sc-content-category-font-size, 12px)',
+            fontWeight: '600',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            padding: 'var(--sc-content-category-padding, 8px 4px 4px 4px)',
+            color: theme === 'dark' ? TOKEN_SLATE_GREY_8 : TOKEN_SLATE_GREY_7,
+        });
+        const emptyStateStyle = styleMap({
+            fontSize: '13px',
+            padding: '16px',
+            textAlign: 'center',
+            color: theme === 'dark' ? TOKEN_SLATE_GREY_7 : TOKEN_SLATE_GREY_8,
+        });
+        // Empty state
+        if (visibleTips.length === 0) {
+            return html `
+        <div
+          style=${containerStyle}
+          data-adaptive-id=${this.instanceId}
+          data-adaptive-type="adaptive-nav"
+        >
+          <div style=${emptyStateStyle}>
+            You're all set for now! We'll share helpful tips here when they're relevant to what
+            you're doing.
+          </div>
+        </div>
+      `;
+        }
+        // Group by category
+        const categoryGroups = new Map();
+        for (const tip of visibleTips) {
+            const cat = tip.config.category;
+            if (!categoryGroups.has(cat)) {
+                categoryGroups.set(cat, []);
+            }
+            categoryGroups.get(cat).push(tip);
+        }
+        const hasCategories = visibleTips.some((t) => t.config.category);
+        return html `
+      <div
+        style=${containerStyle}
+        data-adaptive-id=${this.instanceId}
+        data-adaptive-type="adaptive-nav"
+      >
+        <div style=${accordionStyle}>
+          ${hasCategories
+            ? Array.from(categoryGroups.entries()).map(([category, items]) => html `
+                ${category
+                ? html `<div style=${categoryHeaderStyle} data-category-header=${category}>${category}</div>`
+                : nothing}
+                ${items.map((tip, idx) => __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_renderTipItem).call(this, tip, idx, items.length))}
+              `)
+            : visibleTips.map((tip, idx) => __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_renderTipItem).call(this, tip, idx, visibleTips.length))}
+        </div>
+      </div>
+    `;
+    }
+}
+_NavWidgetLit_contextUnsub = new WeakMap(), _NavWidgetLit_accumulatorUnsub = new WeakMap(), _NavWidgetLit_instances = new WeakSet(), _NavWidgetLit_subscribeRuntime = function _NavWidgetLit_subscribeRuntime() {
+    if (!this.runtime)
+        return;
+    __classPrivateFieldSet(this, _NavWidgetLit_contextUnsub, this.runtime.context.subscribe(() => {
+        this._renderTick += 1;
+    }), "f");
+    if (this.runtime.accumulator?.subscribe) {
+        __classPrivateFieldSet(this, _NavWidgetLit_accumulatorUnsub, this.runtime.accumulator.subscribe(() => {
+            this._renderTick += 1;
+        }), "f");
+    }
+}, _NavWidgetLit_unsubscribeRuntime = function _NavWidgetLit_unsubscribeRuntime() {
+    __classPrivateFieldGet(this, _NavWidgetLit_contextUnsub, "f")?.call(this);
+    __classPrivateFieldSet(this, _NavWidgetLit_contextUnsub, null, "f");
+    __classPrivateFieldGet(this, _NavWidgetLit_accumulatorUnsub, "f")?.call(this);
+    __classPrivateFieldSet(this, _NavWidgetLit_accumulatorUnsub, null, "f");
+}, _NavWidgetLit_getVisibleTips = function _NavWidgetLit_getVisibleTips() {
+    // _renderTick is read here to ensure this re-runs when context/accumulator
+    // notify (same pattern as useMemo with renderTick dep in React version).
+    void this._renderTick;
+    if (!this.runtime)
+        return this.config.actions;
+    return this.config.actions.filter((tip) => {
+        if (!tip.triggerWhen)
+            return true;
+        try {
+            const result = this.runtime.evaluateSync(tip.triggerWhen);
+            return result.value;
+        }
+        catch {
+            // Fail-closed: hide tip when strategy evaluation throws
+            return false;
+        }
+    });
+}, _NavWidgetLit_getResolvedTheme = function _NavWidgetLit_getResolvedTheme() {
+    return resolveTheme(this.config.theme);
+}, _NavWidgetLit_handleToggle = function _NavWidgetLit_handleToggle(id) {
+    const wasExpanded = this._expandedIds.has(id);
+    let next;
+    if (this.config.expandBehavior === 'single') {
+        // Emit collapse events for previously-expanded tips (single mode)
+        for (const prevId of this._expandedIds) {
+            if (prevId !== id) {
+                __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:toggled', {
+                    tipId: prevId,
+                    expanded: false,
+                });
+            }
+        }
+        next = wasExpanded ? new Set() : new Set([id]);
+    }
+    else {
+        next = new Set(this._expandedIds);
+        if (wasExpanded) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+    }
+    __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:toggled', {
+        tipId: id,
+        expanded: !wasExpanded,
+    });
+    this._expandedIds = next;
+}, _NavWidgetLit_handleNavigate = function _NavWidgetLit_handleNavigate(href, external) {
+    // Reject dangerous URIs
+    const normalized = href.trim().toLowerCase();
+    if (normalized.startsWith('javascript:') || normalized.startsWith('data:'))
+        return;
+    __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:tip_clicked', { href, external });
+    // Also fire a standard custom event for host-page listeners
+    this.dispatchEvent(new CustomEvent('nav-tip-clicked', {
+        bubbles: true,
+        detail: { href, external, instanceId: this.instanceId },
+    }));
+    if (external) {
+        window.open(href, '_blank', 'noopener,noreferrer');
+    }
+    else {
+        const url = new URL(href, window.location.origin);
+        url.search = window.location.search;
+        if (!navigateWithFrameworkRouter(url.toString())) {
+            window.history.pushState(null, '', url.toString());
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
+    }
+}, _NavWidgetLit_handleFocusAnchor = function _NavWidgetLit_handleFocusAnchor(anchor) {
+    const el = document.querySelector(anchor.selector);
+    if (!(el instanceof HTMLElement))
+        return;
+    __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_publishEvent).call(this, 'nav:tip_focused', {
+        selector: anchor.selector,
+        route: anchor.route,
+    });
+    this.dispatchEvent(new CustomEvent('nav-tip-focused', {
+        bubbles: true,
+        detail: { selector: anchor.selector, instanceId: this.instanceId },
+    }));
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    pulseElement(el);
+    setTimeout(() => el.focus(), 400);
+}, _NavWidgetLit_publishEvent = function _NavWidgetLit_publishEvent(name, props) {
+    this.runtime?.events.publish(name, {
+        instanceId: this.instanceId,
+        timestamp: Date.now(),
+        ...props,
+    });
+}, _NavWidgetLit_renderTipItem = function _NavWidgetLit_renderTipItem(tip, index, total) {
+    const { id, title, description, href, icon, external, anchor, category: _cat } = tip.config;
+    const isExpanded = this._expandedIds.has(id);
+    const isLast = index === total - 1;
+    const isHovered = this._hoveredId === id;
+    const theme = __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_getResolvedTheme).call(this);
+    // Determine the effective href from anchor or legacy href
+    const effectiveHref = anchor
+        ? Array.isArray(anchor.route)
+            ? anchor.route[0]
+            : anchor.route
+        : href;
+    // Same-page check
+    const isSamePage = anchor
+        ? routeMatchesCurrent(Array.isArray(anchor.route) ? anchor.route : [anchor.route])
+        : effectiveHref
+            ? routeMatchesCurrent([effectiveHref])
+            : false;
+    const hasSelector = anchor?.selector && anchor.selector !== '*';
+    const isFocusAction = isSamePage && hasSelector;
+    const hasAction = !!effectiveHref || isFocusAction;
+    const ctaLabel = isFocusAction ? 'Focus \u2192' : external ? 'Go \u2197' : 'Go \u2192';
+    // Item container styles
+    const itemStyle = styleMap({
+        borderRadius: 'var(--sc-content-border-radius, 8px)',
+        overflow: 'hidden',
+        transition: 'box-shadow 0.2s ease',
+        backgroundColor: 'var(--sc-content-background)',
+        border: 'var(--sc-content-border)',
+        ...(isExpanded
+            ? {
+                boxShadow: theme === 'dark'
+                    ? '0 4px 12px rgba(0, 0, 0, 0.15)'
+                    : '0 4px 12px rgba(0, 0, 0, 0.08)',
+            }
+            : {}),
+        ...(!isLast ? { borderBottom: 'var(--sc-content-item-divider, none)' } : {}),
+    });
+    // Header styles
+    const headerStyle = styleMap({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        width: '100%',
+        padding: 'var(--sc-content-item-padding, 12px 16px)',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: 'var(--sc-content-item-font-size, 15px)',
+        fontWeight: '500',
+        fontFamily: 'inherit',
+        textAlign: 'left',
+        transition: 'background-color 0.15s ease',
+        backgroundColor: isHovered ? 'var(--sc-content-background-hover)' : 'transparent',
+        color: 'var(--sc-content-text-color)',
+    });
+    // Chevron styles
+    const chevronStyle = styleMap({
+        fontSize: '20px',
+        transition: 'transform 0.2s ease',
+        marginLeft: 'auto',
+        flexShrink: '0',
+        color: 'var(--sc-content-chevron-color, currentColor)',
+        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+    });
+    // Body styles
+    const bodyStyle = styleMap({
+        overflow: 'hidden',
+        transition: 'max-height 0.25s ease, padding-bottom 0.25s ease',
+        padding: 'var(--sc-content-body-padding, 0 16px 12px 16px)',
+        color: 'var(--sc-content-text-secondary-color)',
+        maxHeight: isExpanded ? '500px' : '0',
+        paddingBottom: isExpanded ? '16px' : '0',
+    });
+    // Description styles
+    const descriptionStyle = styleMap({
+        fontSize: 'var(--sc-content-body-font-size, 14px)',
+        lineHeight: '1.5',
+        margin: '0',
+    });
+    // CTA / link button styles
+    const linkButtonStyle = styleMap({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        marginTop: '10px',
+        padding: '6px 12px',
+        borderRadius: '6px',
+        textDecoration: 'none',
+        fontSize: '13px',
+        fontWeight: '500',
+        cursor: 'pointer',
+        border: 'none',
+        transition: 'background-color 0.15s ease',
+        backgroundColor: `var(--sc-color-primary, ${TOKEN_PURPLE_4})`,
+        color: '#ffffff',
+    });
+    // Icon styles
+    const iconStyle = styleMap({
+        fontSize: '16px',
+        flexShrink: '0',
+    });
+    // Anchor click handler
+    const onLinkClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isFocusAction && anchor) {
+            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_handleFocusAnchor).call(this, anchor);
+        }
+        else if (effectiveHref) {
+            __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_handleNavigate).call(this, effectiveHref, external ?? false);
+        }
+    };
+    return html `
+      <div
+        style=${itemStyle}
+        data-nav-tip-id=${id}
+      >
+        <button
+          type="button"
+          style=${headerStyle}
+          aria-expanded=${isExpanded}
+          @click=${() => __classPrivateFieldGet(this, _NavWidgetLit_instances, "m", _NavWidgetLit_handleToggle).call(this, id)}
+          @mouseenter=${() => {
+        this._hoveredId = id;
+    }}
+          @mouseleave=${() => {
+        this._hoveredId = null;
+    }}
+        >
+          ${icon ? html `<span style=${iconStyle}>${unsafeHTML(renderIcon(icon))}</span>` : nothing}
+          <span>${title}</span>
+          <span style=${chevronStyle}>${'\u203A'}</span>
+        </button>
+        <div style=${bodyStyle} aria-hidden=${!isExpanded}>
+          <p style=${descriptionStyle}>${description}</p>
+          ${hasAction
+        ? html `
+                <a
+                  href=${effectiveHref || '#'}
+                  style=${linkButtonStyle}
+                  target=${external ? '_blank' : nothing}
+                  rel=${external ? 'noopener noreferrer' : nothing}
+                  @click=${onLinkClick}
+                >${ctaLabel}</a>
+              `
+        : nothing}
+        </div>
+      </div>
+    `;
+};
+// ---------- Reactive properties (no decorators) --------------------------
+NavWidgetLit.properties = {
+    // Public inputs
+    config: { attribute: false },
+    runtime: { attribute: false },
+    instanceId: { type: String },
+    // Internal reactive state
+    _expandedIds: { state: true },
+    _renderTick: { state: true },
+    _hoveredId: { state: true },
+};
+// ============================================================================
+// Custom element registration
+// ============================================================================
+const TAG_NAME = 'syntro-nav-tips';
+export function registerNavWidgetLit() {
+    if (typeof window === 'undefined')
+        return;
+    if (!customElements.get(TAG_NAME)) {
+        customElements.define(TAG_NAME, NavWidgetLit);
+    }
+}