@syntrologie/adapt-nav 2.15.0 → 2.17.0

package/dist/editor.js

@@ -1,326 +1,323 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Adaptive Nav - Editor Component
- *
- * Review & tweak editor for AI-generated navigation tip decisions.
- * Displays a scannable list of tip cards with trigger, rationale,
- * and inline editing. Includes detection badges and hover-to-highlight.
- */
-import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorHeader, EditorInput, EditorLayout, EmptyState, GroupHeader, TriggerJourney, useTriggerWhenStatus, } from '@syntrologie/shared-editor-ui';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { describeTrigger, summarizeNavItem } from './summarize';
-import { isOwnAction, } from './types';
+import "./chunk-HMLY7DHA.js";
+
+// src/editor.ts
+import { html, LitElement, nothing } from "lit";
+
+// src/summarize.ts
+var MAX_TITLE_LEN = 30;
+function truncate(text, max) {
+  if (text.length <= max) return text;
+  return `${text.slice(0, max).trimEnd()}...`;
+}
 function isRuleStrategy(s) {
-    return (typeof s === 'object' &&
-        s !== null &&
-        s.type === 'rules' &&
-        Array.isArray(s.rules));
+  return typeof s === "object" && s !== null && s.type === "rules" && Array.isArray(s.rules);
 }
-function extractTargetingInfo(triggerWhen) {
-    if (!triggerWhen || !isRuleStrategy(triggerWhen)) {
-        return { pagePatterns: [], anchorSelectors: [], hasTargeting: false };
-    }
-    const pagePatterns = new Set();
-    const anchorSelectors = new Set();
-    for (const rule of triggerWhen.rules) {
-        for (const cond of rule.conditions) {
-            const c = cond;
-            if (c.type === 'page_url' && typeof c.url === 'string') {
-                pagePatterns.add(c.url);
-            }
-            else if (c.type === 'anchor_visible' && typeof c.anchorId === 'string') {
-                anchorSelectors.add(c.anchorId);
-            }
-        }
+function describeTrigger(triggerWhen) {
+  if (!triggerWhen) return "All pages";
+  if (!isRuleStrategy(triggerWhen)) return "All pages";
+  const pages = [];
+  const anchors = [];
+  for (const rule of triggerWhen.rules) {
+    for (const condition of rule.conditions) {
+      if (condition.type === "page_url" && typeof condition.url === "string") {
+        pages.push(condition.url);
+      }
+      if (condition.type === "anchor_visible" && typeof condition.anchorId === "string") {
+        anchors.push(condition.anchorId);
+      }
     }
-    const hasTargeting = pagePatterns.size > 0 || anchorSelectors.size > 0;
-    return {
-        pagePatterns: [...pagePatterns],
-        anchorSelectors: [...anchorSelectors],
-        hasTargeting,
-    };
+  }
+  const parts = [];
+  if (pages.length > 0) parts.push(pages[0]);
+  if (anchors.length > 0) parts.push(anchors[0]);
+  return parts.length > 0 ? parts.join(" \xB7 ") : "All pages";
 }
-function extractFirstPage(triggerWhen) {
-    const info = extractTargetingInfo(triggerWhen);
-    return info.pagePatterns[0] || null;
+function summarizeNavItem(item) {
+  const icon = item.config.icon || "\u{1F9ED}";
+  const title = truncate(item.config.title, MAX_TITLE_LEN);
+  return `${icon} ${title}`;
 }
-function extractFirstAnchor(triggerWhen) {
-    const info = extractTargetingInfo(triggerWhen);
-    return info.anchorSelectors[0] || null;
+
+// src/types.ts
+var ACTION_NAMESPACES = ["nav", "navigation"];
+function isOwnAction(action) {
+  return ACTION_NAMESPACES.some((ns) => action.kind.startsWith(`${ns}:`));
 }
-/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
-function savePendingHighlight(selector) {
-    try {
-        sessionStorage.setItem('syntro:editor:pending-highlight', selector);
+
+// src/editor.ts
+var isRuleStrategy2 = (s) => typeof s === "object" && s !== null && s.type === "rules" && Array.isArray(s.rules);
+var extractFirstPage = (triggerWhen) => {
+  if (!triggerWhen || !isRuleStrategy2(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;
     }
-    catch {
-        // Silently ignore
+  }
+  return null;
+};
+var extractFirstAnchor = (triggerWhen) => {
+  if (!triggerWhen || !isRuleStrategy2(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;
     }
-}
-function flattenItems(config) {
-    const actions = (config.actions || []).filter(isOwnAction);
-    return actions.map((tip, i) => ({
-        key: String(i),
-        index: i,
-        summary: summarizeNavItem(tip),
-        trigger: describeTrigger(tip.triggerWhen),
-        rationale: tip.rationale,
-        firstAnchor: extractFirstAnchor(tip.triggerWhen),
-        tip,
-    }));
-}
-function filterConfig(config, dismissedKeys) {
-    const ownActions = (config.actions || []).filter(isOwnAction);
+  }
+  return null;
+};
+var flattenItems = (config) => {
+  const actions = (config.actions || []).filter(isOwnAction);
+  return actions.map((tip, i) => {
+    const tipAnchor = tip.kind === "nav:tip" ? tip.config.anchor?.selector : void 0;
+    const rawRoute = tip.kind === "nav:tip" ? tip.config.anchor?.route : void 0;
+    const tipRoute = typeof rawRoute === "string" ? rawRoute : void 0;
     return {
-        ...config,
-        actions: ownActions.filter((_, i) => !dismissedKeys.has(String(i))),
+      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
     };
-}
-function useDetection(items, getCurrentRoute) {
-    const [detectionMap, setDetectionMap] = useState(new Map());
-    const itemsRef = useRef(items);
-    itemsRef.current = items;
-    useEffect(() => {
-        const runDetection = () => {
-            const map = new Map();
-            const currentPath = getCurrentRoute();
-            for (const item of itemsRef.current) {
-                const targeting = extractTargetingInfo(item.tip.triggerWhen);
-                // Check page match
-                let pageMatch = true;
-                if (targeting.pagePatterns.length > 0) {
-                    pageMatch = targeting.pagePatterns.some((pattern) => {
-                        const regex = new RegExp(`^${pattern.replace(/\*\*/g, '.*').replace(/(?<!\.)(\*)/g, '[^/]*')}$`);
-                        return regex.test(currentPath);
-                    });
-                }
-                // Check anchor presence
-                let anchorFound = false;
-                let element = null;
-                if (item.firstAnchor) {
-                    try {
-                        element = document.querySelector(item.firstAnchor);
-                        anchorFound = element !== null;
-                    }
-                    catch {
-                        // Invalid selector
-                    }
-                }
-                else {
-                    anchorFound = pageMatch;
-                }
-                map.set(item.key, {
-                    found: pageMatch && anchorFound,
-                    element,
-                });
-            }
-            setDetectionMap(map);
-        };
-        runDetection();
-        const interval = setInterval(runDetection, 2000);
-        window.addEventListener('popstate', runDetection);
-        return () => {
-            clearInterval(interval);
-            window.removeEventListener('popstate', runDetection);
-        };
-    }, [getCurrentRoute]);
-    return detectionMap;
-}
-// ============================================================================
-// NavEditor Component
-// ============================================================================
-export function NavEditor({ config, onChange, editor }) {
-    const typedConfig = config;
-    const [dismissedKeys, setDismissedKeys] = useState(() => editor.getDismissedKeys?.() ?? new Set());
-    const [editingKey, setEditingKey] = useState(null);
-    const [_previewMode, setPreviewMode] = useState('after');
-    const [_hoveredKey, setHoveredKey] = useState(null);
-    // Sync dismissed keys back to navigation context on every change
-    useEffect(() => {
-        editor.setDismissedKeys?.(dismissedKeys);
-    }, [dismissedKeys, editor]);
-    // React to global before/after toggle from the panel
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omitted — adding config/typedConfig/previewConfig would cause infinite re-renders since previewConfig triggers state updates
-    useEffect(() => {
-        const mode = editor.previewMode;
-        if (!mode)
-            return;
-        if (mode === 'before') {
-            // Remove all nav tips — push a config with every item filtered out
-            const allKeys = new Set(flattenItems(typedConfig).map((item) => item.key));
-            const empty = filterConfig(typedConfig, allKeys);
-            editor.previewConfig(empty);
-        }
-        else {
-            // Restore the full config
-            editor.previewConfig(config);
-        }
-    }, [editor.previewMode]);
-    // If navigated here with an editKey, jump directly to that item's edit view
-    const initialConsumed = useRef(false);
-    useEffect(() => {
-        if (!initialConsumed.current) {
-            initialConsumed.current = true;
-            if (editor.initialEditKey != null) {
-                setEditingKey(String(editor.initialEditKey));
-            }
-            editor.clearInitialState?.();
-        }
-    }, [editor]);
-    const allItems = flattenItems(typedConfig);
-    const activeItems = allItems.filter((item) => !dismissedKeys.has(item.key));
-    const dismissedItems = allItems.filter((item) => dismissedKeys.has(item.key));
-    const totalLinks = activeItems.length;
-    // Live triggerWhen status for condition diagnostics
-    const triggerWhenItems = useMemo(() => allItems.map((item) => ({
-        id: item.key,
-        triggerWhen: item.tip.triggerWhen,
-    })), [allItems]);
-    const triggerWhenStatuses = useTriggerWhenStatus(triggerWhenItems);
-    const detectionMap = useDetection(allItems, editor.getCurrentRoute);
-    const foundCount = activeItems.filter((item) => detectionMap.get(item.key)?.found).length;
-    const handleDismiss = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.add(key);
-            return next;
-        });
-        if (editingKey === key)
-            setEditingKey(null);
-    }, [editingKey]);
-    const handleRestore = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.delete(key);
-            return next;
-        });
-    }, []);
-    const handleCardBodyClick = useCallback((item) => {
-        setEditingKey(item.key);
-    }, []);
-    const handleTriggerClick = useCallback(async (item) => {
-        const pageUrl = extractFirstPage(item.tip.triggerWhen);
-        if (pageUrl) {
-            if (item.firstAnchor)
-                savePendingHighlight(item.firstAnchor);
-            await editor.navigateTo(pageUrl);
-        }
-        if (item.firstAnchor) {
-            editor.highlightElement(item.firstAnchor);
-        }
-    }, [editor]);
-    const handleBackToList = useCallback(() => {
-        setEditingKey(null);
-        setPreviewMode('after');
-        editor.previewConfig(config);
-        editor.clearHighlight();
-    }, [editor, config]);
-    // Register back handler in panel header when editing
-    useEffect(() => {
-        editor.setBackHandler?.(editingKey !== null ? handleBackToList : null);
-        return () => editor.setBackHandler?.(null);
-    }, [editingKey, handleBackToList, editor]);
-    const _handleBeforeAfter = useCallback((mode) => {
-        setPreviewMode(mode);
-        if (mode === 'before') {
-            const filtered = filterConfig(typedConfig, new Set([editingKey]));
-            editor.previewConfig(filtered);
-        }
-        else {
-            editor.previewConfig(config);
-        }
-    }, [typedConfig, editingKey, editor, config]);
-    const handleFieldChange = useCallback((index, field, value) => {
-        const ownActions = (typedConfig.actions || []).filter(isOwnAction).slice();
-        const link = { ...ownActions[index], config: { ...ownActions[index].config } };
-        link.config[field] = value;
-        ownActions[index] = link;
-        const otherActions = (typedConfig.actions || []).filter((a) => !isOwnAction(a));
-        const updated = { ...typedConfig, actions: [...otherActions, ...ownActions] };
-        onChange(updated);
-        editor.setDirty(true);
-    }, [typedConfig, onChange, editor]);
-    const _handlePublish = useCallback(() => {
-        if (dismissedKeys.size > 0) {
-            const filtered = filterConfig(typedConfig, dismissedKeys);
-            onChange(filtered);
-        }
-        editor.publish();
-    }, [dismissedKeys, typedConfig, onChange, editor]);
-    const handleBadgeClick = useCallback(async (item) => {
-        const detection = detectionMap.get(item.key);
-        if (detection?.found && item.firstAnchor) {
-            editor.highlightElement(item.firstAnchor);
-        }
-        else {
-            const pageUrl = extractFirstPage(item.tip.triggerWhen);
-            if (pageUrl) {
-                if (item.firstAnchor)
-                    savePendingHighlight(item.firstAnchor);
-                await editor.navigateTo(pageUrl);
-                if (item.firstAnchor)
-                    editor.highlightElement(item.firstAnchor);
-            }
-            else if (item.firstAnchor) {
-                editor.highlightElement(item.firstAnchor);
-            }
-        }
-    }, [editor, detectionMap]);
-    const handleCardHover = useCallback((item) => {
-        setHoveredKey(item.key);
-        if (item.firstAnchor) {
-            editor.highlightElement(item.firstAnchor);
-        }
-    }, [editor]);
-    const handleCardLeave = useCallback(() => {
-        setHoveredKey(null);
-        editor.clearHighlight();
-    }, [editor]);
-    // ---- Edit form renderer ----
-    const renderEditFields = (index) => {
-        const actions = (typedConfig.actions || []).filter(isOwnAction);
-        const tip = actions[index];
-        if (!tip)
-            return null;
-        const item = allItems.find((it) => it.key === String(index));
-        return (_jsxs("div", { className: "se-py-1", children: [item && item.trigger !== 'All pages' && (_jsxs("button", { type: "button", "data-trigger": true, className: "se-flex se-items-center se-gap-1 se-text-[11px] se-text-slate-grey-8 se-cursor-pointer se-mb-1 se-border-none se-bg-transparent se-p-0 se-text-left", onClick: () => handleTriggerClick(item), children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsx(EditorInput, { label: "Title", value: tip.config.title, onChange: (e) => handleFieldChange(index, 'title', e.target.value) }), _jsx(EditorInput, { label: "Description", value: tip.config.description, onChange: (e) => handleFieldChange(index, 'description', e.target.value) }), _jsx(EditorInput, { label: "Link URL", value: tip.config.href || '', onChange: (e) => handleFieldChange(index, 'href', e.target.value), placeholder: "Optional" }), _jsx(EditorInput, { label: "Icon", value: tip.config.icon || '', onChange: (e) => handleFieldChange(index, 'icon', e.target.value), placeholder: "e.g., \\u{1f9ed}" }), _jsx(EditorInput, { label: "Category", value: tip.config.category || '', onChange: (e) => handleFieldChange(index, 'category', e.target.value), placeholder: "Optional" }), _jsxs("label", { className: "se-flex se-items-center se-gap-2 se-text-xs se-text-slate-grey-8 se-mb-2", children: [_jsx("input", { type: "checkbox", checked: tip.config.external || false, onChange: (e) => handleFieldChange(index, 'external', e.target.checked) }), "Open in new tab"] }), _jsx("span", { className: "se-text-[11px] se-font-semibold se-text-slate-grey-7 se-mb-1 se-block", children: "AI Rationale" }), _jsx("div", { className: "se-p-2 se-rounded se-border se-border-dashed se-border-white/15 se-bg-white/[0.02] se-text-slate-grey-8 se-text-xs se-mb-2", children: tip.rationale ? tip.rationale.why : 'N/A' })] }));
+  });
+};
+var runDetection = (items) => {
+  const map = /* @__PURE__ */ new Map();
+  const currentPath = window.location.pathname;
+  for (const item of items) {
+    let pageMatch = true;
+    if (item.firstPage) {
+      const pattern = item.firstPage;
+      const regex = new RegExp(
+        `^${pattern.replace(/\*\*/g, ".*").replace(/(?<!\.)(\*)/g, "[^/]*")}$`
+      );
+      pageMatch = regex.test(currentPath);
+    }
+    let anchorFound = false;
+    if (item.firstAnchor) {
+      try {
+        anchorFound = document.querySelector(item.firstAnchor) !== null;
+      } catch {
+      }
+    } else {
+      anchorFound = pageMatch;
+    }
+    map.set(item.key, { found: pageMatch && anchorFound });
+  }
+  return map;
+};
+var NavEditorLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.config = null;
+    this.onChange = null;
+    this._editingKey = null;
+    this._detectionMap = /* @__PURE__ */ new Map();
+    this._detectionInterval = null;
+    this._onPopstate = () => this._runDetection();
+    this._runDetection = () => {
+      if (!this.config) return;
+      this._detectionMap = runDetection(flattenItems(this.config));
     };
-    const subtitle = `${totalLinks} tip${totalLinks !== 1 ? 's' : ''}${totalLinks > 0 ? ` (${foundCount} found on this page)` : ''}`;
-    return (_jsxs(EditorLayout, { children: [_jsx(EditorHeader, { title: "Navigation Tips", subtitle: subtitle, onBack: () => editor.navigateHome() }), _jsx(EditorBody, { children: editingKey !== null ? (
-                /* ---- Edit mode ---- */
-                (() => {
-                    const editIndex = Number(editingKey);
-                    const editItem = allItems.find((it) => it.key === editingKey);
-                    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-mb-3 se-text-[13px] se-font-semibold se-text-slate-grey-10", children: [_jsx("span", { children: '\u{1F9ED}' }), _jsx("span", { children: editItem?.summary })] }), renderEditFields(editIndex)] }));
-                })()) : (
-                /* ---- List mode ---- */
-                _jsxs(_Fragment, { children: [allItems.length === 0 && _jsx(EmptyState, { message: "No tips configured." }), activeItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(GroupHeader, { label: "TIPS", count: activeItems.length }), activeItems.map((item) => {
-                                    const detection = detectionMap.get(item.key);
-                                    return (_jsxs(EditorCard, { itemKey: item.key, onClick: () => handleCardBodyClick(item), onMouseEnter: () => handleCardHover(item), onMouseLeave: handleCardLeave, children: [item.trigger !== 'All pages' && (_jsxs("button", { type: "button", "data-trigger": true, className: "se-flex se-items-center se-gap-1 se-text-[11px] se-text-slate-grey-8 se-cursor-pointer se-mb-1 se-border-none se-bg-transparent se-p-0 se-text-left", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleTriggerClick(item);
-                                                }, children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsxs("div", { "data-card-body": true, role: "button", tabIndex: 0, className: "se-flex se-items-center se-gap-2 se-cursor-pointer", onClick: () => handleCardBodyClick(item), onKeyDown: (e) => {
-                                                    if (e.key === 'Enter' || e.key === ' ')
-                                                        handleCardBodyClick(item);
-                                                }, children: [_jsx(DetectionBadge, { found: detection?.found ?? false, onClick: () => handleBadgeClick(item) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-slate-grey-7 se-text-sm se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            handleDismiss(item.key);
-                                                        }, title: "Dismiss this tip", children: "\u00D7" })] }), _jsxs("div", { className: "se-text-[10px] se-text-slate-grey-7 se-mt-1", children: ["WHY: ", item.rationale ? item.rationale.why : 'N/A'] }), _jsx(TriggerJourney, { status: triggerWhenStatuses.get(item.key) ?? null })] }, item.key));
-                                })] })), dismissedItems.length > 0 && (_jsx(DismissedSection, { count: dismissedItems.length, children: dismissedItems.map((item) => (_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-py-1.5 se-px-2.5 se-rounded-md se-border se-border-white/[0.03] se-bg-transparent se-mb-0.5 se-cursor-pointer se-text-xs se-text-slate-grey-6 se-opacity-60", children: [_jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap se-line-through", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-blue-5 se-text-[11px] se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleRestore(item.key);
-                                        }, children: "Restore" })] }, item.key))) }))] })) })] }));
-}
-/**
- * Editor panel configuration for the app registry.
- */
-export const editorPanel = {
-    title: 'Navigation Tips',
-    icon: '\u{1F9ED}',
-    description: 'Navigation tips accordion with per-item visibility',
+    // ---- 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;
+      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}
+          data-card-body
+          @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);
+    this._detectionInterval = setInterval(() => this._runDetection(), 2e3);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("popstate", this._onPopstate);
+    if (this._detectionInterval) {
+      clearInterval(this._detectionInterval);
+      this._detectionInterval = null;
+    }
+    super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._runDetection();
+  }
+  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 }
 };
-export const editor = {
-    panel: editorPanel,
-    component: NavEditor,
+customElements.define("se-nav-editor", NavEditorLit);
+export {
+  NavEditorLit
 };
-export default NavEditor;
+//# sourceMappingURL=editor.js.map