@syntrologie/adapt-nav 2.28.0 → 2.29.0

package/dist/chunk-VG3E3ALH.js

@@ -0,0 +1,668 @@
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  normalizeRoute,
+  renderIcon,
+  routesMatch,
+  stripMountPlumbing
+} from "./chunk-XO4TLMHA.js";
+
+// src/NavWidgetLit.ts
+import { html, LitElement, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+// src/resolveNavTarget.ts
+function resolveNavTarget(args) {
+  const { href, external, windowOrigin, isIframe } = args;
+  const isOpaqueOrigin = windowOrigin === "null";
+  if (isIframe || isOpaqueOrigin) {
+    return { kind: "open", url: href };
+  }
+  if (external) {
+    return { kind: "open", url: href };
+  }
+  let url;
+  try {
+    url = new URL(href, windowOrigin);
+  } catch {
+    return { kind: "fullnav", url: href };
+  }
+  if (url.origin !== windowOrigin) {
+    return { kind: "fullnav", url: url.toString() };
+  }
+  return { kind: "spa", url };
+}
+function detectIsIframe() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window !== window.top;
+  } catch {
+    return true;
+  }
+}
+
+// src/NavWidgetLit.ts
+var TOKEN_PURPLE_4 = "#6a59ce";
+var TOKEN_SLATE_GREY_7 = "#677384";
+var TOKEN_SLATE_GREY_8 = "#87919f";
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function renderIcon2(emoji) {
+  return renderIcon(emoji) || escapeHtml(emoji);
+}
+function routeMatchesCurrent(routes) {
+  if (typeof window === "undefined") return false;
+  let canonicalCurrent;
+  try {
+    canonicalCurrent = normalizeRoute(window.location.pathname);
+  } catch {
+    return false;
+  }
+  return routes.some((route) => {
+    if (route.endsWith("/**")) {
+      const prefix = route.slice(0, -3);
+      try {
+        const canonicalPrefix = prefix ? normalizeRoute(prefix) : "";
+        return canonicalCurrent.toLowerCase().startsWith(canonicalPrefix.toLowerCase());
+      } catch {
+        return false;
+      }
+    }
+    try {
+      return routesMatch(normalizeRoute(route), canonicalCurrent);
+    } catch {
+      return false;
+    }
+  });
+}
+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";
+  if (typeof window !== "undefined") {
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+}
+var browserNavigationPort = {
+  open(url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  },
+  fullNavigate(url) {
+    window.location.href = url;
+  },
+  pushState(url) {
+    window.history.pushState(null, "", url);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }
+};
+var _contextUnsub, _accumulatorUnsub, _NavWidgetLit_instances, subscribeRuntime_fn, unsubscribeRuntime_fn, getVisibleTips_fn, getResolvedTheme_fn, handleToggle_fn, handleNavigate_fn, handleFocusAnchor_fn, publishEvent_fn, renderTipItem_fn;
+var NavWidgetLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _NavWidgetLit_instances);
+    // ---------- Public properties --------------------------------------------
+    this.config = { expandBehavior: "single", theme: "auto", actions: [] };
+    this.runtime = void 0;
+    this.instanceId = "nav-widget";
+    this.navigationPort = browserNavigationPort;
+    // ---------- Internal state -----------------------------------------------
+    /** @internal */
+    this._expandedIds = /* @__PURE__ */ new Set();
+    /** @internal */
+    this._renderTick = 0;
+    /** @internal */
+    this._hoveredId = null;
+    // ---------- Private subscriptions ----------------------------------------
+    __privateAdd(this, _contextUnsub, null);
+    __privateAdd(this, _accumulatorUnsub, null);
+  }
+  // ---------- No shadow DOM — inherit host CSS variables --------------------
+  createRenderRoot() {
+    return this;
+  }
+  // ---------- Lifecycle: connectedCallback ---------------------------------
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _NavWidgetLit_instances, subscribeRuntime_fn).call(this);
+  }
+  // ---------- Lifecycle: disconnectedCallback ------------------------------
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateMethod(this, _NavWidgetLit_instances, unsubscribeRuntime_fn).call(this);
+  }
+  // ---------- Lifecycle: updated -------------------------------------------
+  updated(changed) {
+    if (changed.has("runtime")) {
+      __privateMethod(this, _NavWidgetLit_instances, unsubscribeRuntime_fn).call(this);
+      __privateMethod(this, _NavWidgetLit_instances, subscribeRuntime_fn).call(this);
+    }
+  }
+  // ---------- Render --------------------------------------------------------
+  render() {
+    const visibleTips = __privateMethod(this, _NavWidgetLit_instances, getVisibleTips_fn).call(this);
+    const theme = __privateMethod(this, _NavWidgetLit_instances, getResolvedTheme_fn).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
+    });
+    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>
+      `;
+    }
+    const categoryGroups = /* @__PURE__ */ 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) => __privateMethod(this, _NavWidgetLit_instances, renderTipItem_fn).call(this, tip, idx, items.length))}
+              `
+    ) : visibleTips.map((tip, idx) => __privateMethod(this, _NavWidgetLit_instances, renderTipItem_fn).call(this, tip, idx, visibleTips.length))}
+        </div>
+      </div>
+    `;
+  }
+};
+_contextUnsub = new WeakMap();
+_accumulatorUnsub = new WeakMap();
+_NavWidgetLit_instances = new WeakSet();
+// ---------- Runtime subscriptions ----------------------------------------
+subscribeRuntime_fn = function() {
+  if (!this.runtime) return;
+  __privateSet(this, _contextUnsub, this.runtime.context.subscribe(() => {
+    this._renderTick += 1;
+  }));
+  if (this.runtime.accumulator?.subscribe) {
+    __privateSet(this, _accumulatorUnsub, this.runtime.accumulator.subscribe(() => {
+      this._renderTick += 1;
+    }));
+  }
+};
+unsubscribeRuntime_fn = function() {
+  var _a, _b;
+  (_a = __privateGet(this, _contextUnsub)) == null ? void 0 : _a.call(this);
+  __privateSet(this, _contextUnsub, null);
+  (_b = __privateGet(this, _accumulatorUnsub)) == null ? void 0 : _b.call(this);
+  __privateSet(this, _accumulatorUnsub, null);
+};
+// ---------- Computed helpers (called on each render) ---------------------
+getVisibleTips_fn = function() {
+  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 {
+      return false;
+    }
+  });
+};
+getResolvedTheme_fn = function() {
+  return resolveTheme(this.config.theme);
+};
+// ---------- Event handlers -----------------------------------------------
+handleToggle_fn = function(id) {
+  const wasExpanded = this._expandedIds.has(id);
+  let next;
+  if (this.config.expandBehavior === "single") {
+    for (const prevId of this._expandedIds) {
+      if (prevId !== id) {
+        __privateMethod(this, _NavWidgetLit_instances, publishEvent_fn).call(this, "nav:toggled", {
+          tipId: prevId,
+          expanded: false
+        });
+      }
+    }
+    next = wasExpanded ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([id]);
+  } else {
+    next = new Set(this._expandedIds);
+    if (wasExpanded) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+  }
+  __privateMethod(this, _NavWidgetLit_instances, publishEvent_fn).call(this, "nav:toggled", {
+    tipId: id,
+    expanded: !wasExpanded
+  });
+  this._expandedIds = next;
+};
+handleNavigate_fn = function(href, external) {
+  const normalized = href.trim().toLowerCase();
+  if (normalized.startsWith("javascript:") || normalized.startsWith("data:")) return;
+  __privateMethod(this, _NavWidgetLit_instances, publishEvent_fn).call(this, "nav:tip_clicked", { href, external });
+  this.dispatchEvent(
+    new CustomEvent("nav-tip-clicked", {
+      bubbles: true,
+      detail: { href, external, instanceId: this.instanceId }
+    })
+  );
+  const target = resolveNavTarget({
+    href,
+    external,
+    windowOrigin: typeof window !== "undefined" ? window.location.origin : "",
+    isIframe: detectIsIframe()
+  });
+  if (target.kind === "open") {
+    this.navigationPort.open(target.url);
+    return;
+  }
+  if (target.kind === "fullnav") {
+    this.navigationPort.fullNavigate(target.url);
+    return;
+  }
+  target.url.search = window.location.search;
+  if (!navigateWithFrameworkRouter(target.url.toString())) {
+    this.navigationPort.pushState(target.url.toString());
+  }
+};
+handleFocusAnchor_fn = function(anchor) {
+  const el = document.querySelector(anchor.selector);
+  if (!(el instanceof HTMLElement)) return;
+  __privateMethod(this, _NavWidgetLit_instances, publishEvent_fn).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);
+};
+publishEvent_fn = function(name, props) {
+  this.runtime?.events.publish(name, {
+    instanceId: this.instanceId,
+    timestamp: Date.now(),
+    ...props
+  });
+};
+// ---------- Tip item rendering -------------------------------------------
+renderTipItem_fn = function(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 = __privateMethod(this, _NavWidgetLit_instances, getResolvedTheme_fn).call(this);
+  const effectiveHref = anchor ? Array.isArray(anchor.route) ? anchor.route[0] : anchor.route : href;
+  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";
+  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)" } : {}
+  });
+  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)"
+  });
+  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)"
+  });
+  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"
+  });
+  const descriptionStyle = styleMap({
+    fontSize: "var(--sc-content-body-font-size, 14px)",
+    lineHeight: "1.5",
+    margin: "0"
+  });
+  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"
+  });
+  const iconStyle = styleMap({
+    fontSize: "16px",
+    flexShrink: "0"
+  });
+  const onLinkClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isFocusAction && anchor) {
+      __privateMethod(this, _NavWidgetLit_instances, handleFocusAnchor_fn).call(this, anchor);
+    } else if (effectiveHref) {
+      __privateMethod(this, _NavWidgetLit_instances, handleNavigate_fn).call(this, effectiveHref, external ?? false);
+    }
+  };
+  return html`
+      <div
+        style=${itemStyle}
+        data-nav-tip-id=${id}
+      >
+        <button
+          type="button"
+          style=${headerStyle}
+          aria-expanded=${isExpanded}
+          @click=${() => __privateMethod(this, _NavWidgetLit_instances, handleToggle_fn).call(this, id)}
+          @mouseenter=${() => {
+    this._hoveredId = id;
+  }}
+          @mouseleave=${() => {
+    this._hoveredId = null;
+  }}
+        >
+          ${icon ? html`<span style=${iconStyle}>${unsafeHTML(renderIcon2(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 }
+};
+var TAG_NAME = "syntro-nav-tips";
+function registerNavWidgetLit() {
+  if (typeof window === "undefined") return;
+  if (!customElements.get(TAG_NAME)) {
+    customElements.define(TAG_NAME, NavWidgetLit);
+  }
+}
+
+// src/runtime.ts
+var executeScrollTo = async (action, context) => {
+  const anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl) {
+    console.error(
+      `[adaptive-nav] Anchor not found for scrollTo, skipping: ${action.anchorId.selector}`
+    );
+    return { cleanup: () => {
+    } };
+  }
+  anchorEl.scrollIntoView({
+    behavior: action.behavior ?? "smooth",
+    block: action.block ?? "center",
+    inline: action.inline ?? "nearest"
+  });
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "navigation:scrollTo",
+    anchorId: action.anchorId,
+    behavior: action.behavior ?? "smooth"
+  });
+  if (action.pulse !== false && typeof context.applyAction === "function") {
+    void context.applyAction({
+      kind: "overlays:pulse",
+      anchorId: action.anchorId
+    }).catch(() => {
+    });
+  }
+  return {
+    cleanup: () => {
+    }
+  };
+};
+function navigateWithFrameworkRouter(url) {
+  if (typeof window === "undefined") return false;
+  const w = window;
+  try {
+    const nextRouter = w.next?.router;
+    if (nextRouter?.push) {
+      nextRouter.push(url);
+      return true;
+    }
+  } catch {
+  }
+  try {
+    if (w.$nuxt?.$router?.push) {
+      w.$nuxt.$router.push(url);
+      return true;
+    }
+  } catch {
+  }
+  if (w.ng || w.getAllAngularRootElements || document.querySelector("[ng-version]")) {
+    window.location.href = url;
+    return true;
+  }
+  if (w.__SVELTEKIT_DATA__ || document.body?.hasAttribute("data-sveltekit")) {
+    window.location.href = url;
+    return true;
+  }
+  if (document.querySelector("[data-astro-transition-fallback]")) {
+    window.location.href = url;
+    return true;
+  }
+  return false;
+}
+function isSameOrigin(url) {
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return parsed.origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+var executeNavigate = async (action, context) => {
+  const url = action.url.trim();
+  if (url.toLowerCase().startsWith("javascript:")) {
+    throw new Error("javascript: URLs are not allowed");
+  }
+  const target = action.target ?? "_self";
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "navigation:navigate",
+    url: action.url,
+    target
+  });
+  if (target === "_blank") {
+    window.open(url, "_blank", "noopener,noreferrer");
+  } else if (!action.forceFullNavigation && isSameOrigin(url)) {
+    if (!navigateWithFrameworkRouter(url)) {
+      window.history.pushState(null, "", url);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    }
+  } else {
+    window.location.href = url;
+  }
+  return {
+    cleanup: () => {
+    }
+  };
+};
+var DEFAULT_NAV_CONFIG = {
+  expandBehavior: "single",
+  theme: "auto",
+  actions: []
+};
+var NavWidgetLitMountable = {
+  mount(container, config) {
+    registerNavWidgetLit();
+    const el = document.createElement("syntro-nav-tips");
+    const incoming = config ?? null;
+    const stripped = stripMountPlumbing(incoming);
+    const runtime2 = incoming?.runtime;
+    const instanceId = incoming?.instanceId ?? "nav-widget";
+    const navConfig = incoming ? stripped : { ...DEFAULT_NAV_CONFIG };
+    Object.assign(el, {
+      config: navConfig,
+      runtime: runtime2,
+      instanceId
+    });
+    container.appendChild(el);
+    return () => el.remove();
+  }
+};
+var executors = [
+  { kind: "navigation:scrollTo", executor: executeScrollTo },
+  { kind: "navigation:navigate", executor: executeNavigate }
+];
+var runtime = {
+  id: "adaptive-nav",
+  version: "2.0.0",
+  name: "Navigation Tips",
+  description: "Navigation actions and accordion-based tips with per-item conditional visibility",
+  /**
+   * Navigation action executors (scrollTo, navigate).
+   */
+  executors,
+  /**
+   * Widget definitions for the runtime's WidgetRegistry.
+   */
+  widgets: [
+    {
+      id: "adaptive-nav:tips",
+      component: NavWidgetLitMountable,
+      metadata: {
+        name: "Navigation Tips",
+        description: "Accordion of contextual navigation tips with per-item visibility",
+        icon: "\u{1F9ED}"
+      }
+    }
+  ],
+  /**
+   * 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) {
+    const actions = props.actions ?? [];
+    return actions.filter((a) => a.notify && a.triggerWhen).map((a) => ({
+      id: `nav:${a.config.id}`,
+      strategy: a.triggerWhen,
+      eventName: "nav:tip_revealed",
+      eventProps: {
+        tipId: a.config.id,
+        title: a.notify.title,
+        body: a.notify.body,
+        icon: a.notify.icon
+      }
+    }));
+  }
+};
+var runtime_default = runtime;
+
+export {
+  executeScrollTo,
+  navigateWithFrameworkRouter,
+  executeNavigate,
+  NavWidgetLitMountable,
+  executors,
+  runtime,
+  runtime_default
+};
+//# sourceMappingURL=chunk-VG3E3ALH.js.map