@syntrologie/adapt-nav 2.16.0 → 2.17.0

package/dist/NavWidget.js

@@ -1,476 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Adaptive Nav - NavWidget Component
- *
- * React component that renders a collapsible navigation tips accordion
- * with per-item conditional visibility based on triggerWhen decision strategies.
- *
- * Demonstrates the compositional action pattern where child actions
- * (nav:tip) serve as configuration data for the parent widget.
- */
-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)
-// ============================================================================
-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>',
-};
-function renderIcon(emoji) {
-    return EMOJI_SVG_MAP[emoji] ?? escapeHtml(emoji);
-}
-// ============================================================================
-// Sanitization
-// ============================================================================
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-// ============================================================================
-// Styles
-// ============================================================================
-const baseStyles = {
-    container: {
-        fontFamily: 'var(--sc-font-family, system-ui, -apple-system, sans-serif)',
-        maxWidth: '100%',
-        overflow: 'hidden',
-    },
-    accordion: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 'var(--sc-content-item-gap, 6px)',
-    },
-    item: {
-        borderRadius: 'var(--sc-content-border-radius, 8px)',
-        overflow: 'hidden',
-        transition: 'box-shadow 0.2s ease',
-    },
-    header: {
-        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',
-    },
-    chevron: {
-        fontSize: '20px',
-        transition: 'transform 0.2s ease',
-        marginLeft: 'auto',
-        flexShrink: 0,
-        color: 'var(--sc-content-chevron-color, currentColor)',
-    },
-    icon: {
-        fontSize: '16px',
-        flexShrink: 0,
-    },
-    body: {
-        overflow: 'hidden',
-        transition: 'max-height 0.25s ease, padding-bottom 0.25s ease',
-        padding: 'var(--sc-content-body-padding, 0 16px 12px 16px)',
-    },
-    description: {
-        fontSize: 'var(--sc-content-body-font-size, 14px)',
-        lineHeight: '1.5',
-        margin: 0,
-    },
-    linkButton: {
-        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',
-    },
-    categoryHeader: {
-        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)',
-    },
-    emptyState: {
-        fontSize: '13px',
-        padding: '16px',
-        textAlign: 'center',
-    },
-};
-const themeStyles = {
-    light: {
-        container: {
-            backgroundColor: 'transparent',
-            color: 'inherit',
-        },
-        item: {
-            backgroundColor: 'var(--sc-content-background)',
-            border: 'var(--sc-content-border)',
-        },
-        itemExpanded: {
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
-        },
-        header: {
-            backgroundColor: 'transparent',
-            color: 'var(--sc-content-text-color)',
-        },
-        headerHover: {
-            backgroundColor: 'var(--sc-content-background-hover)',
-        },
-        body: {
-            color: 'var(--sc-content-text-secondary-color)',
-        },
-        linkButton: {
-            // 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: {
-            color: slateGrey[7],
-        },
-        emptyState: {
-            color: slateGrey[8],
-        },
-    },
-    dark: {
-        container: {
-            backgroundColor: 'transparent',
-            color: 'inherit',
-        },
-        item: {
-            backgroundColor: 'var(--sc-content-background)',
-            border: 'var(--sc-content-border)',
-        },
-        itemExpanded: {
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        },
-        header: {
-            backgroundColor: 'transparent',
-            color: 'var(--sc-content-text-color)',
-        },
-        headerHover: {
-            backgroundColor: 'var(--sc-content-background-hover)',
-        },
-        body: {
-            color: 'var(--sc-content-text-secondary-color)',
-        },
-        linkButton: {
-            // 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: {
-            color: slateGrey[8],
-        },
-        emptyState: {
-            color: slateGrey[7],
-        },
-    },
-};
-// ============================================================================
-// Helpers
-// ============================================================================
-/** Check if any of the given routes match the current page pathname */
-function routeMatchesCurrent(routes) {
-    if (typeof window === 'undefined')
-        return false;
-    const current = window.location.pathname;
-    return routes.some((route) => {
-        // Strip query/hash from route if present
-        const routePath = route.split('?')[0].split('#')[0];
-        // Exact match or glob pattern (** suffix)
-        if (routePath.endsWith('/**')) {
-            return current.startsWith(routePath.slice(0, -3));
-        }
-        return current === routePath;
-    });
-}
-/** Apply a brief pulse animation to an element, then remove it */
-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 NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, onFocusAnchor, theme, }) {
-    const [isHovered, setIsHovered] = useState(false);
-    const colors = themeStyles[theme];
-    const { title, description, href, icon, external, anchor } = item.config;
-    const itemStyle = {
-        ...baseStyles.item,
-        ...colors.item,
-        ...(isExpanded ? colors.itemExpanded : {}),
-        ...(!isLast ? { borderBottom: 'var(--sc-content-item-divider, none)' } : {}),
-    };
-    const headerStyle = {
-        ...baseStyles.header,
-        ...colors.header,
-        ...(isHovered ? colors.headerHover : {}),
-    };
-    const chevronStyle = {
-        ...baseStyles.chevron,
-        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-    };
-    const bodyStyle = {
-        ...baseStyles.body,
-        ...colors.body,
-        maxHeight: isExpanded ? '500px' : '0',
-        paddingBottom: isExpanded ? '16px' : '0',
-    };
-    // Determine the effective navigation target from anchor or legacy href
-    const effectiveHref = anchor
-        ? Array.isArray(anchor.route)
-            ? anchor.route[0]
-            : anchor.route
-        : href;
-    // Same-page check: anchor exists, selector is meaningful, and route matches current page
-    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 handleLinkClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isFocusAction && anchor) {
-            onFocusAnchor(anchor);
-        }
-        else if (effectiveHref) {
-            onNavigate(effectiveHref, external ?? false);
-        }
-    };
-    // 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 && (
-                    // 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
-// ============================================================================
-/**
- * NavWidget - Renders a collapsible navigation tips accordion.
- *
- * This component demonstrates the compositional action pattern:
- * - Parent (NavWidget) receives `config.actions` array
- * - Each action has optional `triggerWhen` for per-item visibility
- * - Parent evaluates triggerWhen and filters visible tips
- * - Parent manages expand state and re-rendering on context changes
- */
-export function NavWidget({ config, runtime, instanceId }) {
-    // Force re-render when context/accumulator changes.
-    const [renderTick, forceUpdate] = useReducer((x) => x + 1, 0);
-    // Track expanded tip IDs
-    const [expandedIds, setExpandedIds] = useState(new Set());
-    // Subscribe to context changes for reactive updates
-    useEffect(() => {
-        const unsubscribe = runtime.context.subscribe(() => {
-            forceUpdate();
-        });
-        return unsubscribe;
-    }, [runtime.context]);
-    // Subscribe to accumulator changes for event_count-based triggerWhen
-    useEffect(() => {
-        if (!runtime.accumulator?.subscribe)
-            return;
-        return runtime.accumulator.subscribe(() => {
-            forceUpdate();
-        });
-    }, [runtime.accumulator]);
-    // Filter visible tips based on per-item triggerWhen
-    // biome-ignore lint/correctness/useExhaustiveDependencies: renderTick is intentionally included to force re-evaluation when the runtime's mutable context changes (subscribed above via forceUpdate)
-    const visibleTips = useMemo(() => config.actions.filter((tip) => {
-        if (!tip.triggerWhen)
-            return true;
-        try {
-            const result = runtime.evaluateSync(tip.triggerWhen);
-            return result.value;
-        }
-        catch {
-            // If strategy evaluation fails, hide the tip (fail-closed)
-            return false;
-        }
-    }), [config.actions, runtime, renderTick]);
-    // Group by category
-    const categoryGroups = useMemo(() => {
-        const groups = new Map();
-        for (const tip of visibleTips) {
-            const cat = tip.config.category;
-            if (!groups.has(cat)) {
-                groups.set(cat, []);
-            }
-            groups.get(cat).push(tip);
-        }
-        return groups;
-    }, [visibleTips]);
-    // Check if any items have categories
-    const hasCategories = useMemo(() => visibleTips.some((t) => t.config.category), [visibleTips]);
-    // Resolve theme (auto → detect system preference)
-    const resolvedTheme = useMemo(() => {
-        if (config.theme && config.theme !== 'auto')
-            return config.theme;
-        if (typeof window !== 'undefined') {
-            return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
-        return 'light';
-    }, [config.theme]);
-    // Handle tip toggle
-    const handleToggle = useCallback((id) => {
-        setExpandedIds((prev) => {
-            const wasExpanded = prev.has(id);
-            let next;
-            if (config.expandBehavior === 'single') {
-                // In single mode, emit collapse events for any previously-expanded tips
-                for (const prevId of prev) {
-                    if (prevId !== id) {
-                        runtime.events.publish('nav:toggled', {
-                            instanceId,
-                            tipId: prevId,
-                            expanded: false,
-                            timestamp: Date.now(),
-                        });
-                    }
-                }
-                next = wasExpanded ? new Set() : new Set([id]);
-            }
-            else {
-                next = new Set(prev);
-                if (wasExpanded) {
-                    next.delete(id);
-                }
-                else {
-                    next.add(id);
-                }
-            }
-            // Emit event for the clicked tip using fresh state from the updater
-            runtime.events.publish('nav:toggled', {
-                instanceId,
-                tipId: id,
-                expanded: !wasExpanded,
-                timestamp: Date.now(),
-            });
-            return next;
-        });
-    }, [config.expandBehavior, runtime.events, instanceId]);
-    // Handle navigation with event publishing
-    const handleNavigate = useCallback((href, external) => {
-        // Reject dangerous URIs to prevent XSS
-        const normalizedHref = href.trim().toLowerCase();
-        if (normalizedHref.startsWith('javascript:') || normalizedHref.startsWith('data:')) {
-            return;
-        }
-        runtime.events.publish('nav:tip_clicked', {
-            instanceId,
-            href,
-            external,
-            timestamp: Date.now(),
-        });
-        if (external) {
-            window.open(href, '_blank', 'noopener,noreferrer');
-        }
-        else {
-            // 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;
-            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
-    const handleFocusAnchor = useCallback((anchor) => {
-        const el = document.querySelector(anchor.selector);
-        if (!(el instanceof HTMLElement))
-            return;
-        runtime.events.publish('nav:tip_focused', {
-            instanceId,
-            selector: anchor.selector,
-            route: anchor.route,
-            timestamp: Date.now(),
-        });
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        pulseElement(el);
-        // Focus after scroll completes
-        setTimeout(() => el.focus(), 400);
-    }, [runtime.events, instanceId]);
-    // Compute container styles
-    const containerStyle = {
-        ...baseStyles.container,
-        ...themeStyles[resolvedTheme].container,
-    };
-    const categoryHeaderStyle = {
-        ...baseStyles.categoryHeader,
-        ...themeStyles[resolvedTheme].categoryHeader,
-    };
-    const emptyStateStyle = {
-        ...baseStyles.emptyState,
-        ...themeStyles[resolvedTheme].emptyState,
-    };
-    // Render a list of nav tip items
-    const renderItems = (items) => items.map((tip, index) => (_jsx(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, onFocusAnchor: handleFocusAnchor, theme: resolvedTheme }, tip.config.id)));
-    // Empty state
-    if (visibleTips.length === 0) {
-        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx("div", { style: emptyStateStyle, children: "You're all set for now! We'll share helpful tips here when they're relevant to what you're doing." }) }));
-    }
-    return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx("div", { style: baseStyles.accordion, children: hasCategories
-                ? Array.from(categoryGroups.entries()).map(([category, items]) => (_jsxs(React.Fragment, { children: [category && (_jsx("div", { style: categoryHeaderStyle, "data-category-header": category, children: category })), renderItems(items)] }, category ?? '__ungrouped')))
-                : renderItems(visibleTips) }) }));
-}
-// ============================================================================
-// Mountable Widget Interface
-// ============================================================================
-/**
- * Mountable widget interface for the runtime's WidgetRegistry.
- */
-export const NavMountableWidget = {
-    mount(container, config) {
-        const { runtime, instanceId = 'nav-widget', ...navConfig } = config || {
-            expandBehavior: 'single',
-            theme: 'auto',
-            actions: [],
-        };
-        // React rendering when runtime + ReactDOM are available
-        if (runtime && typeof createRoot === 'function') {
-            const root = createRoot(container);
-            root.render(React.createElement(NavWidget, {
-                config: navConfig,
-                runtime: runtime,
-                instanceId,
-            }));
-            return () => {
-                root.unmount();
-            };
-        }
-    },
-};
-export default NavWidget;