@syntrologie/adapt-nav 2.14.0 → 2.15.0

package/dist/NavWidgetLit.test.js

@@ -0,0 +1,199 @@
+/**
+ * NavWidgetLit — Vitest + @open-wc/testing-helpers unit tests
+ *
+ * Tests cover: rendering, expand/collapse, nav-tip-clicked event, XSS rejection,
+ * empty state, category grouping, and visibility filtering (triggerWhen).
+ */
+import { fixture, html } from '@open-wc/testing-helpers';
+import { describe, expect, it, vi } from 'vitest';
+import { NavWidgetLit } from './NavWidgetLit';
+// ── Custom element registration ───────────────────────────────────────────────
+const TAG = 'syntro-nav-tips';
+if (!customElements.get(TAG)) {
+    customElements.define(TAG, NavWidgetLit);
+}
+// ── Helpers ────────────────────────────────────────────────────────────────────
+function makeTip(id, overrides = {}) {
+    return {
+        kind: 'nav:tip',
+        config: {
+            id,
+            title: `Tip ${id}`,
+            description: `Description for tip ${id}`,
+            ...overrides,
+        },
+    };
+}
+function makeRuntime(overrides = {}) {
+    return {
+        evaluateSync: vi.fn().mockReturnValue({ value: true, isFallback: false }),
+        context: { subscribe: vi.fn().mockReturnValue(vi.fn()) },
+        events: { publish: vi.fn() },
+        accumulator: {
+            subscribe: vi.fn().mockReturnValue(vi.fn()),
+            register: vi.fn(),
+        },
+        ...overrides,
+    };
+}
+function makeConfig(tips, overrides = {}) {
+    return {
+        expandBehavior: 'single',
+        theme: 'light',
+        actions: tips,
+        ...overrides,
+    };
+}
+async function renderWidget(tips, configOverrides = {}, runtime) {
+    const el = await fixture(html `<syntro-nav-tips></syntro-nav-tips>`);
+    el.config = makeConfig(tips, configOverrides);
+    el.runtime = runtime;
+    await el.updateComplete;
+    return el;
+}
+// ── Tests ─────────────────────────────────────────────────────────────────────
+describe('NavWidgetLit', () => {
+    // ── Rendering ────────────────────────────────────────────────────────────
+    it('renders navigation tips from config', async () => {
+        const el = await renderWidget([makeTip('t1'), makeTip('t2')]);
+        expect(el.querySelectorAll('[data-nav-tip-id]')).toHaveLength(2);
+        expect(el.querySelector('[data-nav-tip-id="t1"]')).not.toBeNull();
+        expect(el.querySelector('[data-nav-tip-id="t2"]')).not.toBeNull();
+    });
+    it('renders tip titles in button text', async () => {
+        const el = await renderWidget([makeTip('a', { title: 'My Nav Tip' })]);
+        const btn = el.querySelector('button');
+        expect(btn.textContent).toContain('My Nav Tip');
+    });
+    // ── Expand / collapse ────────────────────────────────────────────────────
+    it('starts with all tips collapsed', async () => {
+        const el = await renderWidget([makeTip('t1'), makeTip('t2')]);
+        const buttons = el.querySelectorAll('button[aria-expanded]');
+        for (const btn of Array.from(buttons)) {
+            expect(btn.getAttribute('aria-expanded')).toBe('false');
+        }
+    });
+    it('expands a tip when its header button is clicked', async () => {
+        const el = await renderWidget([makeTip('t1')]);
+        const btn = el.querySelector('[data-nav-tip-id="t1"] button');
+        btn.click();
+        await el.updateComplete;
+        expect(btn.getAttribute('aria-expanded')).toBe('true');
+    });
+    it('collapses an expanded tip on second click', async () => {
+        const el = await renderWidget([makeTip('t1')]);
+        const btn = el.querySelector('[data-nav-tip-id="t1"] button');
+        btn.click();
+        await el.updateComplete;
+        btn.click();
+        await el.updateComplete;
+        expect(btn.getAttribute('aria-expanded')).toBe('false');
+    });
+    it('collapses previously-expanded tip in single-expand mode', async () => {
+        const el = await renderWidget([makeTip('t1'), makeTip('t2')], {
+            expandBehavior: 'single',
+        });
+        const btn1 = el.querySelector('[data-nav-tip-id="t1"] button');
+        const btn2 = el.querySelector('[data-nav-tip-id="t2"] button');
+        btn1.click();
+        await el.updateComplete;
+        expect(btn1.getAttribute('aria-expanded')).toBe('true');
+        btn2.click();
+        await el.updateComplete;
+        expect(btn1.getAttribute('aria-expanded')).toBe('false');
+        expect(btn2.getAttribute('aria-expanded')).toBe('true');
+    });
+    it('allows multiple tips open simultaneously in multiple-expand mode', async () => {
+        const el = await renderWidget([makeTip('t1'), makeTip('t2')], {
+            expandBehavior: 'multiple',
+        });
+        const btn1 = el.querySelector('[data-nav-tip-id="t1"] button');
+        const btn2 = el.querySelector('[data-nav-tip-id="t2"] button');
+        btn1.click();
+        await el.updateComplete;
+        btn2.click();
+        await el.updateComplete;
+        expect(btn1.getAttribute('aria-expanded')).toBe('true');
+        expect(btn2.getAttribute('aria-expanded')).toBe('true');
+    });
+    // ── Custom event ─────────────────────────────────────────────────────────
+    it('fires nav-tip-clicked custom event when CTA link is clicked', async () => {
+        const tip = makeTip('t1', { href: '/dashboard' });
+        const el = await renderWidget([tip]);
+        // Expand so the CTA link is rendered
+        const btn = el.querySelector('[data-nav-tip-id="t1"] button');
+        btn.click();
+        await el.updateComplete;
+        const events = [];
+        el.addEventListener('nav-tip-clicked', (e) => events.push(e));
+        const link = el.querySelector('a');
+        link.click();
+        expect(events).toHaveLength(1);
+        expect(events[0].detail.href).toBe('/dashboard');
+    });
+    // ── XSS rejection ────────────────────────────────────────────────────────
+    it('does not navigate when href starts with javascript:', async () => {
+        const originalOpen = window.open;
+        const openSpy = vi.fn();
+        window.open = openSpy;
+        // Directly invoke the internal navigate path via a link with a JS URL
+        const tip = makeTip('xss', { href: 'javascript:alert(1)', external: false });
+        const el = await renderWidget([tip]);
+        const headerBtn = el.querySelector('[data-nav-tip-id="xss"] button');
+        headerBtn.click();
+        await el.updateComplete;
+        const link = el.querySelector('a');
+        if (link) {
+            const navEvents = [];
+            el.addEventListener('nav-tip-clicked', (e) => navEvents.push(e));
+            link.click();
+            // The click handler checks the href and bails out early — no event should fire
+            expect(navEvents).toHaveLength(0);
+        }
+        window.open = originalOpen;
+    });
+    // ── Empty state ───────────────────────────────────────────────────────────
+    it('renders empty state when config has no actions', async () => {
+        const el = await renderWidget([]);
+        // No tip items
+        expect(el.querySelectorAll('[data-nav-tip-id]')).toHaveLength(0);
+        // The empty-state message is present
+        expect(el.textContent).toContain("You're all set for now");
+    });
+    // ── Category grouping ─────────────────────────────────────────────────────
+    it('renders category headers when tips have categories', async () => {
+        const tips = [
+            makeTip('t1', { category: 'Getting Started' }),
+            makeTip('t2', { category: 'Advanced' }),
+        ];
+        const el = await renderWidget(tips);
+        const catHeaders = el.querySelectorAll('[data-category-header]');
+        expect(catHeaders).toHaveLength(2);
+        const headerTexts = Array.from(catHeaders).map((h) => h.textContent?.trim());
+        expect(headerTexts).toContain('Getting Started');
+        expect(headerTexts).toContain('Advanced');
+    });
+    it('does not render category headers when no tips have categories', async () => {
+        const tips = [makeTip('t1'), makeTip('t2')];
+        const el = await renderWidget(tips);
+        expect(el.querySelectorAll('[data-category-header]')).toHaveLength(0);
+    });
+    // ── Visibility filtering (triggerWhen) ────────────────────────────────────
+    it('hides tips whose triggerWhen evaluates to false', async () => {
+        const visibleTip = makeTip('visible');
+        const hiddenTip = {
+            ...makeTip('hidden'),
+            triggerWhen: { type: 'rules', rules: [], default: false },
+        };
+        const runtime = makeRuntime({
+            evaluateSync: vi.fn((strategy) => {
+                if (strategy.default === false)
+                    return { value: false, isFallback: false };
+                return { value: true, isFallback: false };
+            }),
+        });
+        const el = await renderWidget([visibleTip, hiddenTip], {}, runtime);
+        expect(el.querySelector('[data-nav-tip-id="visible"]')).not.toBeNull();
+        expect(el.querySelector('[data-nav-tip-id="hidden"]')).toBeNull();
+    });
+});

package/dist/editor-lit.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Adaptive Nav - Lit Editor Component
+ *
+ * Lit web component port of the React Nav editor (editor.tsx).
+ * Displays nav tip cards with detection badges, inline editing
+ * (Title, Description, Link URL, Icon, Category), and rationale.
+ *
+ * Custom events:
+ *   navigate-home — user clicked back
+ *   dirty-change  — { dirty: boolean }
+ */
+import { LitElement } from 'lit';
+import { type NavConfig } from './types';
+export declare class NavEditorLit extends LitElement {
+    static properties: {
+        config: {
+            attribute: boolean;
+        };
+        onChange: {
+            attribute: boolean;
+        };
+        _editingKey: {
+            state: boolean;
+        };
+        _detectionMap: {
+            state: boolean;
+        };
+    };
+    config: NavConfig | null;
+    onChange: ((updated: Record<string, unknown>) => void) | null;
+    private _editingKey;
+    private _detectionMap;
+    private _detectionInterval;
+    private _onPopstate;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _runDetection;
+    private _handleBack;
+    private _handleItemClick;
+    private _handleFieldChange;
+    private _handleBadgeClick;
+    private _renderDetectionBadge;
+    private _renderEditMode;
+    private _renderListMode;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=editor-lit.d.ts.map

package/dist/editor-lit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-lit.d.ts","sourceRoot":"","sources":["../src/editor-lit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAe,KAAK,SAAS,EAAwC,MAAM,SAAS,CAAC;AAkH5F,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,UAAU;;;;;;;;;;;;;MAKxB;IAEF,MAAM,EAAE,SAAS,GAAG,IAAI,CAAQ;IAChC,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,CAAQ;IAErE,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,aAAa,CAA0C;IAC/D,OAAO,CAAC,kBAAkB,CAA+C;IACzE,OAAO,CAAC,WAAW,CAA8B;IAExC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAS5B,YAAY,IAAI,IAAI;IAK7B,OAAO,CAAC,aAAa,CAGnB;IAIF,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,kBAAkB,CAaxB;IAIF,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,qBAAqB,CAkB3B;IAEF,OAAO,CAAC,eAAe,CA0DrB;IAEF,OAAO,CAAC,eAAe,CA0CrB;IAEO,MAAM;CAoChB"}

package/dist/editor-lit.js

@@ -0,0 +1,319 @@
+/**
+ * Adaptive Nav - Lit Editor Component
+ *
+ * Lit web component port of the React Nav editor (editor.tsx).
+ * Displays nav tip cards with detection badges, inline editing
+ * (Title, Description, Link URL, Icon, Category), and rationale.
+ *
+ * Custom events:
+ *   navigate-home — user clicked back
+ *   dirty-change  — { dirty: boolean }
+ */
+import { html, LitElement, nothing } from 'lit';
+import { describeTrigger, summarizeNavItem } from './summarize';
+import { isOwnAction } from './types';
+// ============================================================================
+// Targeting Extraction
+// ============================================================================
+const isRuleStrategy = (s) => typeof s === 'object' &&
+    s !== null &&
+    s.type === 'rules' &&
+    Array.isArray(s.rules);
+const extractFirstPage = (triggerWhen) => {
+    if (!triggerWhen || !isRuleStrategy(triggerWhen))
+        return null;
+    for (const rule of triggerWhen.rules) {
+        for (const cond of rule.conditions) {
+            const c = cond;
+            if (c.type === 'page_url' && typeof c.url === 'string')
+                return c.url;
+        }
+    }
+    return null;
+};
+const extractFirstAnchor = (triggerWhen) => {
+    if (!triggerWhen || !isRuleStrategy(triggerWhen))
+        return null;
+    for (const rule of triggerWhen.rules) {
+        for (const cond of rule.conditions) {
+            const c = cond;
+            if (c.type === 'anchor_visible' && typeof c.anchorId === 'string')
+                return c.anchorId;
+        }
+    }
+    return null;
+};
+// ============================================================================
+// Helpers
+// ============================================================================
+const flattenItems = (config) => {
+    const actions = (config.actions || []).filter(isOwnAction);
+    return actions.map((tip, i) => {
+        // Prefer the tip's own anchor (real pipeline data ships the target here).
+        // Fall back to an `anchor_visible` condition inside triggerWhen for older configs.
+        const tipAnchor = tip.kind === 'nav:tip' ? tip.config.anchor?.selector : undefined;
+        const rawRoute = tip.kind === 'nav:tip' ? tip.config.anchor?.route : undefined;
+        const tipRoute = typeof rawRoute === 'string' ? rawRoute : undefined;
+        return {
+            key: String(i),
+            index: i,
+            summary: summarizeNavItem(tip),
+            trigger: describeTrigger(tip.triggerWhen),
+            rationale: tip.rationale?.why,
+            firstAnchor: tipAnchor || extractFirstAnchor(tip.triggerWhen),
+            firstPage: tipRoute || extractFirstPage(tip.triggerWhen),
+            tip,
+        };
+    });
+};
+const runDetection = (items) => {
+    const map = new Map();
+    const currentPath = window.location.pathname;
+    for (const item of items) {
+        // Page match
+        let pageMatch = true;
+        if (item.firstPage) {
+            const pattern = item.firstPage;
+            const regex = new RegExp(`^${pattern.replace(/\*\*/g, '.*').replace(/(?<!\.)(\*)/g, '[^/]*')}$`);
+            pageMatch = regex.test(currentPath);
+        }
+        // Anchor match
+        let anchorFound = false;
+        if (item.firstAnchor) {
+            try {
+                anchorFound = document.querySelector(item.firstAnchor) !== null;
+            }
+            catch {
+                // Invalid selector
+            }
+        }
+        else {
+            anchorFound = pageMatch;
+        }
+        map.set(item.key, { found: pageMatch && anchorFound });
+    }
+    return map;
+};
+// ============================================================================
+// Element
+// ============================================================================
+export class NavEditorLit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.config = null;
+        this.onChange = null;
+        this._editingKey = null;
+        this._detectionMap = new Map();
+        this._detectionInterval = null;
+        this._onPopstate = () => this._runDetection();
+        this._runDetection = () => {
+            if (!this.config)
+                return;
+            this._detectionMap = runDetection(flattenItems(this.config));
+        };
+        // ---- Actions ----
+        this._handleBack = () => {
+            if (this._editingKey !== null) {
+                this._editingKey = null;
+            }
+            else {
+                this.dispatchEvent(new CustomEvent('navigate-home', { bubbles: true }));
+            }
+        };
+        this._handleItemClick = (key) => {
+            this._editingKey = key;
+        };
+        this._handleFieldChange = (index, field, value) => {
+            if (!this.config || !this.onChange)
+                return;
+            const ownActions = (this.config.actions || []).filter(isOwnAction).slice();
+            const tip = { ...ownActions[index], config: { ...ownActions[index].config } };
+            tip.config[field] = value;
+            ownActions[index] = tip;
+            const otherActions = (this.config.actions || []).filter((a) => !isOwnAction(a));
+            const updated = { ...this.config, actions: [...otherActions, ...ownActions] };
+            this.onChange(updated);
+            this.dispatchEvent(new CustomEvent('dirty-change', { detail: { dirty: true }, bubbles: true }));
+        };
+        // ---- Render ----
+        this._handleBadgeClick = (item, e) => {
+            e.stopPropagation();
+            const href = item.tip.config.href;
+            if (!href)
+                return;
+            // SPA navigate via pushState + popstate
+            window.history.pushState({}, '', href);
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        };
+        this._renderDetectionBadge = (item) => {
+            const detection = this._detectionMap.get(item.key);
+            const found = detection?.found ?? false;
+            if (found) {
+                return html `<button type="button"
+        title="Click to scroll to element"
+        @click=${(e) => this._handleBadgeClick(item, e)}
+        class="se-shrink-0 se-w-2 se-h-2 se-rounded-full se-border-none se-cursor-pointer"
+        style="background:#22c55e"
+      ></button>`;
+            }
+            return html `<button type="button"
+      title="Click to navigate to page"
+      @click=${(e) => this._handleBadgeClick(item, e)}
+      class="se-shrink-0 se-w-2 se-h-2 se-rounded-full se-border-none se-cursor-pointer"
+      style="background:#ef4444"
+    ></button>`;
+        };
+        this._renderEditMode = (item) => {
+            const tip = item.tip;
+            return html `
+      <div class="se-py-1">
+        <div class="se-flex se-items-center se-gap-2 se-mb-3 se-text-[13px] se-font-semibold se-text-text-primary">
+          <span>🧭</span>
+          <span>${item.summary}</span>
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Title</label>
+          <input type="text" .value=${tip.config.title}
+            @input=${(e) => this._handleFieldChange(item.index, 'title', e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm" />
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Description</label>
+          <input type="text" .value=${tip.config.description}
+            @input=${(e) => this._handleFieldChange(item.index, 'description', e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm" />
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Link URL</label>
+          <input type="text" .value=${tip.config.href || ''} placeholder="Optional"
+            @input=${(e) => this._handleFieldChange(item.index, 'href', e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm" />
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Icon</label>
+          <input type="text" .value=${tip.config.icon || ''} placeholder="e.g., 🧭"
+            @input=${(e) => this._handleFieldChange(item.index, 'icon', e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm" />
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Category</label>
+          <input type="text" .value=${tip.config.category || ''} placeholder="Optional"
+            @input=${(e) => this._handleFieldChange(item.index, 'category', e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm" />
+        </div>
+
+        ${tip.rationale
+                ? html `
+          <div>
+            <span class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">AI Rationale</span>
+            <div class="se-p-2 se-rounded se-border se-border-dashed se-border-border-primary se-bg-card-bg se-text-text-secondary se-text-xs se-mb-2">
+              ${tip.rationale.why}
+            </div>
+          </div>
+        `
+                : nothing}
+      </div>
+    `;
+        };
+        this._renderListMode = (items) => {
+            if (items.length === 0) {
+                return html `<div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
+        No tips configured.
+      </div>`;
+            }
+            return html `
+      <div class="se-text-[11px] se-font-semibold se-uppercase se-tracking-wider se-text-text-secondary se-mb-2 se-px-1">
+        TIPS <span class="se-text-text-tertiary se-font-normal">${items.length}</span>
+      </div>
+      ${items.map((item) => html `
+        <div
+          data-item-key=${item.key}
+          @click=${() => this._handleItemClick(item.key)}
+          class="se-p-3 se-rounded-lg se-border se-border-border-primary se-bg-card-bg se-cursor-pointer se-mb-2 se-transition-all hover:se-border-pink-4/40 hover:se-bg-pink-4/5"
+        >
+          <div class="se-flex se-items-center se-gap-2">
+            ${this._renderDetectionBadge(item)}
+            <span class="se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap se-text-sm se-text-text-primary">
+              ${item.summary}
+            </span>
+          </div>
+          ${item.trigger !== 'All pages'
+                ? html `
+            <div class="se-text-[10px] se-text-text-tertiary se-mt-1">📍 ${item.trigger}</div>
+          `
+                : nothing}
+          ${item.rationale
+                ? html `
+            <div class="se-text-[10px] se-text-text-tertiary se-mt-1">WHY: ${item.rationale}</div>
+          `
+                : nothing}
+        </div>
+      `)}
+    `;
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('popstate', this._onPopstate);
+        // Run detection on an interval (matches React's 2s interval)
+        this._detectionInterval = setInterval(() => this._runDetection(), 2000);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this._onPopstate);
+        if (this._detectionInterval) {
+            clearInterval(this._detectionInterval);
+            this._detectionInterval = null;
+        }
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this._runDetection();
+        // No auto-dirty on load — only dirty when user makes changes (matching React behavior).
+    }
+    render() {
+        if (!this.config) {
+            return html `<div class="se-p-8 se-text-center se-text-text-secondary se-text-sm">Loading...</div>`;
+        }
+        const items = flattenItems(this.config);
+        const editItem = this._editingKey !== null ? items.find((it) => it.key === this._editingKey) : null;
+        return html `
+      <div class="se-flex se-flex-col se-h-full">
+        <!-- Header (no Back button — panel provides that) -->
+        <div class="se-px-4 se-pt-3 se-pb-1">
+          <h2 class="se-m-0 se-text-base se-font-semibold se-text-text-primary">Navigation Tips</h2>
+          <p class="se-m-0 se-mt-0.5 se-text-xs se-text-text-secondary">
+            ${items.length} tip${items.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+
+        <div class="se-flex-1 se-overflow-auto se-p-4">
+          ${editItem
+            ? html `
+            <button type="button" @click=${() => {
+                this._editingKey = null;
+            }}
+              class="se-mb-3 se-py-1 se-px-2 se-rounded se-border-none se-bg-card-bg se-text-text-secondary se-text-xs se-cursor-pointer"
+            >← Back to list</button>
+            ${this._renderEditMode(editItem)}
+          `
+            : this._renderListMode(items)}
+        </div>
+      </div>
+    `;
+    }
+}
+NavEditorLit.properties = {
+    config: { attribute: false },
+    onChange: { attribute: false },
+    _editingKey: { state: true },
+    _detectionMap: { state: true },
+};
+customElements.define('se-nav-editor', NavEditorLit);

package/dist/runtime-lit.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Adaptive Nav - Runtime Module (Lit)
+ *
+ * Runtime manifest for the navigation tips accordion adaptive.
+ * Uses the Lit web component mountable instead of the React one.
+ * Includes widget-based nav tips and navigation action executors
+ * (scrollTo, navigate) previously in adaptive-navigation.
+ */
+import type { ActionExecutor, NavConfig, NavigateAction, NavWidgetRuntime, ScrollToAction } from './types';
+/**
+ * Execute a scrollTo action
+ */
+export declare const executeScrollTo: ActionExecutor<ScrollToAction>;
+/**
+ * Try to navigate using the host framework's native router.
+ * Returns true if a framework router handled the navigation,
+ * false if no framework was detected (caller should use pushState or location.href).
+ *
+ * Using the native router preserves SPA behavior (no full reload),
+ * layout state, scroll position, and framework-specific features
+ * (RSC streaming, view transitions, etc.).
+ */
+export declare function navigateWithFrameworkRouter(url: string): boolean;
+/**
+ * Execute a navigate action
+ */
+export declare const executeNavigate: ActionExecutor<NavigateAction>;
+/**
+ * NavWidgetLitMountable — Mounts the `<syntro-nav-tips>` Lit web component.
+ *
+ * Drop-in companion to NavMountableWidget that avoids React/ReactDOM entirely.
+ * Self-registers the custom element on first use.
+ */
+export declare const NavWidgetLitMountable: {
+    mount(container: HTMLElement, config?: NavConfig & {
+        runtime?: NavWidgetRuntime;
+        instanceId?: string;
+    }): () => void;
+};
+/**
+ * All executors provided by this app.
+ * These are registered with the runtime's ExecutorRegistry.
+ */
+export declare const executors: readonly [{
+    readonly kind: "navigation:scrollTo";
+    readonly executor: ActionExecutor<ScrollToAction>;
+}, {
+    readonly kind: "navigation:navigate";
+    readonly executor: ActionExecutor<NavigateAction>;
+}];
+/**
+ * Runtime manifest for adaptive-nav (Lit variant).
+ *
+ * Provides:
+ * - Navigation action executors (scrollTo, navigate)
+ * - Widget-based nav tips accordion using the Lit web component
+ */
+export declare const runtime: {
+    id: string;
+    version: string;
+    name: string;
+    description: string;
+    /**
+     * Navigation action executors (scrollTo, navigate).
+     */
+    executors: readonly [{
+        readonly kind: "navigation:scrollTo";
+        readonly executor: ActionExecutor<ScrollToAction>;
+    }, {
+        readonly kind: "navigation:navigate";
+        readonly executor: ActionExecutor<NavigateAction>;
+    }];
+    /**
+     * Widget definitions for the runtime's WidgetRegistry.
+     */
+    widgets: {
+        id: string;
+        component: {
+            mount(container: HTMLElement, config?: NavConfig & {
+                runtime?: NavWidgetRuntime;
+                instanceId?: string;
+            }): () => void;
+        };
+        metadata: {
+            name: string;
+            description: string;
+            icon: string;
+        };
+    }[];
+    /**
+     * Extract notify watcher entries from tile config props.
+     * The runtime evaluates these continuously (even with drawer closed)
+     * and publishes nav:tip_revealed when triggerWhen transitions false → true.
+     */
+    notifyWatchers(props: Record<string, unknown>): {
+        id: string;
+        strategy: import("./types").DecisionStrategy<boolean>;
+        eventName: string;
+        eventProps: {
+            tipId: string;
+            title: string | undefined;
+            body: string | undefined;
+            icon: string | undefined;
+        };
+    }[];
+};
+export default runtime;
+//# sourceMappingURL=runtime-lit.d.ts.map

package/dist/runtime-lit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-lit.d.ts","sourceRoot":"","sources":["../src/runtime-lit.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,cAAc,EAEd,gBAAgB,EAChB,cAAc,EACf,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA+B1D,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAgDhE;AAgBD;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CAuC1D,CAAC;AAMF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB;qBAEnB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CA2B3E,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;EAGZ,CAAC;AAMX;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAMlB;;OAEG;;;;;;;;IAGH;;OAEG;;;;6BAnEU,WAAW,WACb,SAAS,GAAG;gBAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;gBAAC,UAAU,CAAC,EAAE,MAAM,CAAA;aAAE;;;;;;;;IA+E1E;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;CAgB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}