@flamingo-stack/openframe-frontend-core 0.0.705-snapshot.20261006160157 → 0.0.705

package/src/components/navigation/site-footer.tsx

@@ -1,256 +0,0 @@
-'use client';
-
-import type React from 'react';
-import { useState } from 'react';
-import type { NavGroup, SiteNav } from '../../types/navigation';
-import { cn } from '../../utils/cn';
-import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
-import { SocialIconRow } from '../social-icon-row';
-import { Button } from '../ui/button';
-import { NavItemRow } from './nav-item-row';
-import { defaultRenderSiteNavLink, NAV_FOCUS_CLASS, navLinkLabel, type SiteNavLinkRenderer } from './site-nav-link';
-
-export interface SiteFooterProps {
-  nav: SiteNav;
-  logo: React.ReactNode;
-  /** The platform's name beside the logo: a string is set as the wordmark, a
-   *  node is drawn as given (a platform with its own styled name). */
-  name?: React.ReactNode;
-  renderLink?: SiteNavLinkRenderer;
-  /** The closing band's primary CTA when `nav.primaryCta` is `'trial'` or `'waitlist'`. */
-  cta?: React.ReactNode;
-  /** Replaces the default social row built from `nav.brand.social` (each
-   *  link's `iconName` is its social platform key). */
-  social?: React.ReactNode;
-  /** Rendered in the brand column, under the tagline and the social links. */
-  brandExtra?: React.ReactNode;
-  /** Opaque ODS background class. Default `bg-ods-bg`. */
-  backgroundClassName?: string;
-  /** Generated, never typed. Default: the current year. */
-  year?: number;
-}
-
-/** Below `md`, more columns than this fold into accordions. */
-const ACCORDION_OVER = 2;
-
-// Literal class maps: Tailwind's scanner needs the full class strings.
-const DESKTOP_COLUMNS: Record<number, string> = {
-  1: 'md:grid-cols-1',
-  2: 'md:grid-cols-2',
-  3: 'md:grid-cols-3',
-  4: 'md:grid-cols-3 lg:grid-cols-4',
-  5: 'md:grid-cols-3 lg:grid-cols-5',
-  6: 'md:grid-cols-3 lg:grid-cols-6',
-};
-
-const HEADING_CLASS = 'text-ods-text-muted text-h5';
-
-function FooterColumn({
-  group,
-  accordion,
-  renderLink,
-}: {
-  group: NavGroup;
-  accordion: boolean;
-  renderLink: SiteNavLinkRenderer;
-}) {
-  const [open, setOpen] = useState(false);
-  const listId = `site-footer-${group.id}`;
-  const links = group.links.map(link => (
-    <li key={link.id}>
-      <NavItemRow link={link} variant="label" renderLink={renderLink} />
-    </li>
-  ));
-
-  return (
-    <div
-      className={cn(
-        'flex min-w-0 flex-col md:gap-[var(--spacing-system-mf)]',
-        accordion ? 'border-b border-ods-border md:border-b-0' : 'gap-[var(--spacing-system-mf)]',
-      )}
-    >
-      {group.title &&
-        (accordion ? (
-          <>
-            {/* Below md the heading is the accordion's button; from md it is a plain heading. */}
-            <h3 className="md:hidden">
-              <Button
-                type="button"
-                variant="glyph"
-                size="wrap"
-                font="regular"
-                aria-expanded={open}
-                aria-controls={listId}
-                onClick={() => setOpen(prev => !prev)}
-                className={cn(
-                  'flex min-h-14 w-full items-center justify-between gap-[var(--spacing-system-sf)] text-left',
-                  HEADING_CLASS,
-                  NAV_FOCUS_CLASS,
-                )}
-              >
-                {group.title}
-                <Chevron02DownIcon
-                  aria-hidden="true"
-                  className={cn('h-5 w-5 shrink-0 transition-transform duration-150', open && 'rotate-180')}
-                />
-              </Button>
-            </h3>
-            <h3 className={cn('hidden md:block', HEADING_CLASS)}>{group.title}</h3>
-          </>
-        ) : (
-          <h3 className={HEADING_CLASS}>{group.title}</h3>
-        ))}
-      {/* Always in the DOM (crawlers read the footer links); a folded
-          accordion only hides its list below md. */}
-      <ul
-        id={listId}
-        className={cn(
-          'flex-col md:flex md:gap-[var(--spacing-system-sf)] md:pb-0',
-          accordion
-            ? open
-              ? 'flex gap-[var(--spacing-system-sf)] pb-[var(--spacing-system-mf)]'
-              : 'hidden'
-            : 'flex gap-[var(--spacing-system-sf)]',
-        )}
-      >
-        {links}
-      </ul>
-    </div>
-  );
-}
-
-/**
- * The site footer of every platform, drawn from one `SiteNav`: the closing
- * band, the brand column, the link columns and the legal line.
- */
-export function SiteFooter({
-  nav,
-  logo,
-  name,
-  renderLink = defaultRenderSiteNavLink,
-  cta,
-  social,
-  brandExtra,
-  backgroundClassName,
-  year = new Date().getFullYear(),
-}: SiteFooterProps) {
-  const band = nav.closingBand;
-  const bandPrimary =
-    typeof nav.primaryCta === 'object' ? (
-      <Button variant="accent" href={nav.primaryCta.href}>
-        {nav.primaryCta.label}
-      </Button>
-    ) : nav.primaryCta === 'none' ? null : (
-      (cta ?? null)
-    );
-
-  const columns = nav.footerColumns;
-  const accordion = columns.length > ACCORDION_OVER;
-  const socialRow =
-    social ??
-    (nav.brand.social.length > 0 ? (
-      <SocialIconRow
-        compact
-        links={nav.brand.social.map(link => ({
-          platform: link.iconName ?? link.id,
-          href: link.href,
-          label: link.label,
-        }))}
-      />
-    ) : null);
-
-  return (
-    <footer
-      className={cn(
-        'relative z-[44] w-full border-t border-ods-border px-[var(--spacing-system-lf)] text-ods-text-primary',
-        backgroundClassName ?? 'bg-ods-bg',
-      )}
-    >
-      {band && (
-        <div className="flex flex-col gap-[var(--spacing-system-lf)] border-b border-ods-border py-[var(--spacing-system-xlf)] md:flex-row md:items-center md:justify-between md:gap-[var(--spacing-system-xlf)] md:py-14">
-          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xsf)]">
-            <h2 className="text-h2">{band.heading}</h2>
-            <p className="text-ods-text-secondary text-h4">{band.subheading}</p>
-          </div>
-          <div className="flex shrink-0 flex-col gap-[var(--spacing-system-sf)] md:flex-row">
-            {bandPrimary}
-            {band.secondary && (
-              <Button variant="outline" href={band.secondary.href} openInNewTab={band.secondary.external}>
-                {navLinkLabel(band.secondary)}
-              </Button>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div className="flex flex-col gap-8 py-[var(--spacing-system-xlf)] lg:flex-row lg:gap-16 lg:py-14">
-        <div className="flex w-full shrink-0 flex-col items-start gap-[var(--spacing-system-mf)] lg:w-60">
-          <span className="flex items-center gap-[var(--spacing-system-xsf)]">
-            {logo}
-            {typeof name === 'string' ? (
-              <span className="whitespace-nowrap text-ods-text-primary text-wordmark">{name}</span>
-            ) : (
-              name
-            )}
-          </span>
-          <p className="text-ods-text-secondary text-h6">{nav.brand.tagline}</p>
-          {socialRow}
-          {nav.brand.statusUrl &&
-            renderLink({
-              link: { href: nav.brand.statusUrl, external: true },
-              className: cn(
-                'inline-flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary transition-colors text-h6 hover:text-ods-text-primary',
-                NAV_FOCUS_CLASS,
-              ),
-              children: (
-                <>
-                  <span aria-hidden="true" className="h-2 w-2 rounded-full bg-ods-success" />
-                  System status
-                </>
-              ),
-            })}
-          {brandExtra}
-        </div>
-
-        {columns.length > 0 && (
-          <nav
-            aria-label="Footer"
-            className={cn(
-              'grid min-w-0 flex-1 md:gap-7',
-              accordion ? 'grid-cols-1' : 'grid-cols-2 gap-7',
-              DESKTOP_COLUMNS[Math.min(columns.length, 6)],
-            )}
-          >
-            {columns.map(group => (
-              <FooterColumn key={group.id} group={group} accordion={accordion} renderLink={renderLink} />
-            ))}
-          </nav>
-        )}
-      </div>
-
-      {/* The legal line is text, not navigation: muted, with its links in the
-          accent so they still read as links (prototype `.nf-legal`). */}
-      <div
-        className={cn(
-          'flex flex-col gap-[var(--spacing-system-xxs)] border-t border-ods-border pb-[var(--spacing-system-xlf)] pt-[var(--spacing-system-lf)] text-ods-text-muted text-h6 md:flex-row md:items-center md:justify-between md:gap-[var(--spacing-system-lf)]',
-        )}
-      >
-        <span>
-          © {year} {nav.legal.company}
-        </span>
-        <span className="flex flex-wrap items-center gap-x-[var(--spacing-system-mf)] gap-y-[var(--spacing-system-xxs)]">
-          {nav.legal.notes.length > 0 && <span>{nav.legal.notes.join(' · ')}</span>}
-          {nav.legal.links.map(link => (
-            <NavItemRow
-              key={link.id}
-              link={link}
-              variant="label"
-              renderLink={renderLink}
-              className="text-ods-accent hover:text-ods-accent hover:underline"
-            />
-          ))}
-        </span>
-      </div>
-    </footer>
-  );
-}

package/src/components/navigation/site-header.tsx

@@ -1,339 +0,0 @@
-'use client';
-
-import type React from 'react';
-import { useEffect, useRef, useState } from 'react';
-import Link from '../../embed-shims/next-link';
-import { useActiveSection } from '../../hooks/ui/use-active-section';
-import { useNavMenus } from '../../hooks/ui/use-nav-menus';
-import type { NavMenu, SiteNav } from '../../types/navigation';
-import { cn } from '../../utils/cn';
-import { EntityIcon } from '../icon-display';
-import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
-import { Menu01Icon } from '../icons-v2-generated/interface/menu-01-icon';
-import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { Button } from '../ui/button';
-import { HeaderButton } from './header-button';
-import { MingoAiButton } from './mingo-ai-button';
-import { MOBILE_NAV_SHEET_ID } from './mobile-nav-sheet-id';
-import { isMegaMenu, NavPanel, type NavPanelMotion } from './nav-panel';
-import { defaultRenderSiteNavLink, NAV_FOCUS_CLASS, type SiteNavLinkRenderer } from './site-nav-link';
-import { TopNavigation } from './top-navigation';
-
-export interface SiteHeaderProps {
-  nav: SiteNav;
-  /** The host router's pathname: marks the active section and closes menus on navigation. */
-  pathname: string;
-  logo: React.ReactNode;
-  /** Omitted: the logo is not a link. */
-  logoHref?: string;
-  /** The host's link (Next `Link`, unified navigation). Default: `<a>`. */
-  renderLink?: SiteNavLinkRenderer;
-  /** Leading cells (admin sidebar toggle). Each cell owns its divider. */
-  leading?: React.ReactNode;
-  /** Host actions at the right (profile button, custom buttons). Shown at every width. */
-  actions?: React.ReactNode;
-  /** The primary CTA node when `nav.primaryCta` is `'trial'` or `'waitlist'`. */
-  cta?: React.ReactNode;
-  /** Trailing cells (ticket alerts). Each cell owns its divider. */
-  sideActions?: React.ReactNode;
-  /**
-   * The Mingo AI launcher, first in the right cluster (before Sign in).
-   * Omitted: no launcher. `icon` and `label` are the server-configured
-   * assistant identity (the same ones the chat panel shows); `source` scopes
-   * the `ask-ai:open` event the launcher dispatches.
-   */
-  mingo?: { source?: string; icon?: React.ReactNode; label?: string; shortcutHint?: boolean };
-  /** Omitted: no burger. */
-  mobile?: { isOpen: boolean; onToggle: () => void; controlsId?: string };
-  /** Values for `NavLink.badgeKey`. */
-  badges?: Record<string, number>;
-  /** Rendered under a menu with `showSocial`. */
-  social?: React.ReactNode;
-  autoHide?: boolean;
-  /** Opaque ODS background class. */
-  backgroundClassName?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  /** The id the "Skip to content" link targets. Default `main-content`. */
-  skipToContentId?: string;
-}
-
-// A top-level item (prototype `.nv-l`): 40px tall, quiet until hovered, open
-// or current.
-const TOP_ITEM_CLASS =
-  'relative inline-flex h-10 items-center gap-1.5 whitespace-nowrap rounded-md px-3.5 text-ods-text-secondary transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary';
-// The current section: a 2px accent underline and an accent wash.
-const TOP_ITEM_CURRENT_CLASS =
-  'rounded-b-none bg-gradient-to-b from-transparent to-ods-accent/10 text-ods-text-primary after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-ods-accent';
-
-/** A top-level item's optional glyph (`NavMenu.iconName`), before its label. */
-const menuIcon = (menu: NavMenu) =>
-  menu.iconName ? <EntityIcon icon={{ name: menu.iconName }} size={20} className="size-5 shrink-0" /> : null;
-
-/**
- * The site header of every platform, drawn from one `SiteNav`: logo, the
- * menus left-aligned after it, then the Mingo AI launcher, Sign in, the host's
- * actions, the primary CTA (the only button) and the trailing cells. A
- * platform differs only in the data and the slots it passes.
- *
- * Below `lg` the menus and Sign in leave the bar (they live in
- * `MobileNavSheet`); the host's actions, the CTA and the launcher stay.
- */
-export function SiteHeader({
-  nav,
-  pathname,
-  logo,
-  logoHref,
-  renderLink = defaultRenderSiteNavLink,
-  leading,
-  actions,
-  cta,
-  sideActions,
-  mingo,
-  mobile,
-  badges,
-  social,
-  autoHide = false,
-  backgroundClassName,
-  className,
-  style,
-  skipToContentId = 'main-content',
-}: SiteHeaderProps) {
-  const [show, setShow] = useState(true);
-  // Not state: nothing renders the previous offset, and as `useState` it
-  // re-rendered the whole header on every scroll event just to store a number.
-  const lastScrollY = useRef(0);
-
-  const activeId = useActiveSection(nav.menus, pathname);
-  const { openId, close, getTriggerProps, getPanelProps } = useNavMenus({ pathname });
-
-  // The menu that was open before this one, kept during render (no effect, no
-  // late frame): it tells an opening mega menu which side its content comes from.
-  const [trail, setTrail] = useState<{ id: string | null; from: string | null }>({ id: null, from: null });
-  if (trail.id !== openId) setTrail({ id: openId, from: trail.id });
-  const previousId = trail.id === openId ? trail.from : trail.id;
-  const megaIds = nav.menus.filter(isMegaMenu).map(menu => menu.id);
-  const openMegaIndex = openId === null ? -1 : megaIds.indexOf(openId);
-  const previousMegaIndex = previousId === null ? -1 : megaIds.indexOf(previousId);
-  const megaMotion: NavPanelMotion =
-    openMegaIndex < 0 || previousMegaIndex < 0 ? 'open' : openMegaIndex > previousMegaIndex ? 'from-end' : 'from-start';
-
-  useEffect(() => {
-    // Only add the scroll listener while auto-hide is on. Nothing to reset
-    // here: `show` is masked by `autoHide` where it is read (`headerShown`), so
-    // turning auto-hide off can never leave the header stuck off-screen.
-    if (!autoHide) return undefined;
-
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      const prevScrollY = lastScrollY.current;
-      lastScrollY.current = currentScrollY;
-
-      if (currentScrollY > prevScrollY && currentScrollY > 50) setShow(false);
-      else if (currentScrollY < prevScrollY || currentScrollY <= 10) setShow(true);
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [autoHide]);
-
-  // An open menu holds the header in place: hiding the bar would take the
-  // panel the visitor is reading with it.
-  const headerShown = !autoHide || show || openId !== null;
-
-  const renderMenu = (menu: NavMenu) => {
-    const current = menu.id === activeId;
-    const hasPanel = !!menu.columns?.length || !!menu.features?.length || !!menu.sideLinks?.length;
-
-    if (!hasPanel) {
-      if (!menu.href) return null;
-      return (
-        <div key={menu.id} className="flex">
-          <Button
-            asChild
-            variant="transparent"
-            size="wrap"
-            font="regular"
-            className={cn(TOP_ITEM_CLASS, NAV_FOCUS_CLASS, current && TOP_ITEM_CURRENT_CLASS)}
-          >
-            {renderLink({
-              link: { href: menu.href },
-              'aria-current': current ? 'page' : undefined,
-              children: (
-                <>
-                  {menuIcon(menu)}
-                  {menu.label}
-                </>
-              ),
-            })}
-          </Button>
-        </div>
-      );
-    }
-
-    const open = openId === menu.id;
-    return (
-      // A dropdown is anchored to its trigger (`relative`); a mega menu to the
-      // bar itself, so its wrapper stays unpositioned.
-      <div key={menu.id} className={cn('flex', !isMegaMenu(menu) && 'relative')}>
-        <Button
-          type="button"
-          variant="transparent"
-          size="wrap"
-          font="regular"
-          {...getTriggerProps(menu.id)}
-          aria-current={current ? 'page' : undefined}
-          className={cn(
-            TOP_ITEM_CLASS,
-            NAV_FOCUS_CLASS,
-            open && 'bg-ods-bg-hover text-ods-text-primary',
-            current && TOP_ITEM_CURRENT_CLASS,
-          )}
-        >
-          {menuIcon(menu)}
-          {menu.label}
-          <Chevron02DownIcon
-            aria-hidden="true"
-            // `!`: the Button sizes every glyph inside it at 20px; the chevron is 16.
-            className={cn('!h-4 !w-4 transition-transform duration-150', open && 'rotate-180')}
-          />
-        </Button>
-        <NavPanel
-          {...getPanelProps(menu.id)}
-          menu={menu}
-          open={open}
-          motion={open ? megaMotion : undefined}
-          handoff={openMegaIndex >= 0}
-          renderLink={renderLink}
-          badges={badges}
-          social={social}
-          onNavigate={close}
-        />
-      </div>
-    );
-  };
-
-  const primaryCta =
-    typeof nav.primaryCta === 'object' ? (
-      <Button variant="accent" href={nav.primaryCta.href}>
-        {nav.primaryCta.label}
-      </Button>
-    ) : nav.primaryCta === 'none' ? null : (
-      (cta ?? null)
-    );
-  const hasRight = !!mingo || !!nav.signIn || !!actions || !!primaryCta;
-
-  return (
-    <div
-      // Hook point for page-scoped header CSS (a full-screen deck hides the bar).
-      data-site-header=""
-      className="sticky top-0 z-[50] w-full transition-transform duration-300 ease-in-out"
-      style={{ transform: headerShown ? 'translateY(0)' : 'translateY(-100%)' }}
-    >
-      {/* First tab stop of the page; visible only while focused. */}
-      <Link
-        href={`#${skipToContentId}`}
-        className={cn(
-          'sr-only left-[var(--spacing-system-lf)] top-3 z-[70] rounded-md bg-ods-text-primary px-[var(--spacing-system-mf)] py-[var(--spacing-system-xsf)] text-ods-bg text-h6 focus:not-sr-only focus:absolute',
-          NAV_FOCUS_CLASS,
-        )}
-      >
-        Skip to content
-      </Link>
-      {/* Unified ODS top-navigation shell (Figma 2797-5978), cell model with
-          per-cell dividers. NOTE: no `backdrop-blur` anywhere in this bar.
-          Every platform ships an OPAQUE header background, so a
-          backdrop-filter would blur a backdrop that is then fully painted
-          over: zero visual effect, but the browser still re-rasterizes the
-          strip behind this sticky bar every scroll frame and content flickers
-          as it passes under the header. A translucent "glass" header needs
-          the blur and a translucent `backgroundClassName` together. */}
-      <TopNavigation
-        // `relative` anchors a mega menu to the bar: it opens full width
-        // right under it.
-        className={cn('relative', className)}
-        style={style}
-        backgroundClassName={backgroundClassName}
-        centerBreakpoint="lg"
-        size="big"
-        leading={
-          <>
-            {leading}
-            {/* Menu toggle: a leading cell, banded with the menus' breakpoint
-                (`lg`) so the desktop menus and the toggle never co-show. */}
-            {mobile && (
-              <HeaderButton
-                className="border-r border-ods-border lg:hidden"
-                onClick={mobile.onToggle}
-                isActive={mobile.isOpen}
-                aria-label={mobile.isOpen ? 'Close menu' : 'Open menu'}
-                aria-expanded={mobile.isOpen}
-                // Conditional: the sheet unmounts when closed, so an
-                // unconditional reference would dangle (axe aria-valid-attr-value).
-                aria-controls={mobile.isOpen ? (mobile.controlsId ?? MOBILE_NAV_SHEET_ID) : undefined}
-                icon={mobile.isOpen ? <XmarkIcon className="h-6 w-6" /> : <Menu01Icon className="h-6 w-6" />}
-              />
-            )}
-          </>
-        }
-        logo={
-          logoHref
-            ? renderLink({
-                link: { href: logoHref },
-                className: cn(
-                  'flex min-w-0 items-center rounded-md transition-opacity duration-200 hover:opacity-80',
-                  NAV_FOCUS_CLASS,
-                ),
-                'aria-label': nav.brand.name,
-                children: logo,
-              })
-            : logo
-        }
-        // Big-bar rule (Figma 2936-6812): a fixed 24px left inset on the logo
-        // zone at every breakpoint, which also reads as the gap between a
-        // leading cell and the logo. `shrink` lets the logo, never the CTA,
-        // give way on the narrowest phones.
-        logoClassName="shrink pl-[var(--spacing-system-lf)] md:pl-[var(--spacing-system-lf)] lg:pl-[var(--spacing-system-lf)]"
-        center={
-          nav.menus.length > 0 ? (
-            <nav aria-label="Main" className="flex items-center gap-[var(--spacing-system-xxs)]">
-              {nav.menus.map(renderMenu)}
-            </nav>
-          ) : undefined
-        }
-        centerClassName="justify-start pl-[var(--spacing-system-xlf)]"
-        cta={
-          hasRight ? (
-            <>
-              {mingo && (
-                <MingoAiButton
-                  source={mingo.source}
-                  icon={mingo.icon}
-                  label={mingo.label}
-                  shortcutHint={mingo.shortcutHint}
-                />
-              )}
-              {nav.signIn && (
-                <div className="hidden lg:flex">
-                  <Button
-                    asChild
-                    variant="transparent"
-                    size="wrap"
-                    font="regular"
-                    className={cn(TOP_ITEM_CLASS, NAV_FOCUS_CLASS)}
-                  >
-                    {renderLink({ link: nav.signIn, children: nav.signIn.label })}
-                  </Button>
-                </div>
-              )}
-              {actions}
-              {primaryCta}
-            </>
-          ) : undefined
-        }
-        ctaClassName="gap-[var(--spacing-system-xsf)]"
-        sideActions={sideActions}
-      />
-    </div>
-  );
-}

package/src/components/navigation/site-nav-link.tsx

@@ -1,41 +0,0 @@
-import type React from 'react';
-import Link from '../../embed-shims/next-link';
-import type { NavLink } from '../../types/navigation';
-
-/**
- * How a host renders one navigation link (Next `Link`, a unified-navigation
- * anchor). Every site navigation component takes one; omitted, links go
- * through {@link defaultRenderSiteNavLink}.
- */
-export type SiteNavLinkRenderer = (props: {
-  link: Pick<NavLink, 'href' | 'external'>;
-  className?: string;
-  children: React.ReactNode;
-  onClick?: (e: React.MouseEvent) => void;
-  'aria-current'?: 'page';
-  'aria-label'?: string;
-}) => React.ReactNode;
-
-/**
- * The default link: the library's `Link` shim (a plain `<a>`, or the host's
- * registered router link, so internal links soft-navigate), opened in a new
- * tab for a link that leaves the site.
- */
-export const defaultRenderSiteNavLink: SiteNavLinkRenderer = ({ link, children, ...rest }) =>
-  link.external ? (
-    <Link href={link.href} target="_blank" rel="noopener noreferrer" {...rest}>
-      {children}
-    </Link>
-  ) : (
-    <Link href={link.href} {...rest}>
-      {children}
-    </Link>
-  );
-
-/** A link's label, with its `{count}` token filled from `link.count`. */
-export function navLinkLabel(link: Pick<NavLink, 'label' | 'count'>): string {
-  return link.count === undefined ? link.label : link.label.replace('{count}', String(link.count));
-}
-
-/** Focus ring shared by every navigation link and trigger. */
-export const NAV_FOCUS_CLASS = 'outline-none focus-visible:ring-2 focus-visible:ring-ods-accent';

package/src/hooks/ui/use-active-section.ts

@@ -1,44 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import type { NavMenu } from '../../types/navigation';
-
-/** The path of an internal href, without its query or `#anchor`. `null` for an
- *  absolute URL: another site is never the current section. */
-function pathOf(href: string | undefined): string | null {
-  if (!href || !href.startsWith('/') || href.startsWith('//')) return null;
-  const path = href.split(/[?#]/)[0];
-  return path.length > 1 ? path.replace(/\/+$/, '') : '/';
-}
-
-/** Boundary-aware prefix test: `/pricing` holds `/pricing` and `/pricing/x`,
- *  never `/pricing-old`; `/` holds only `/`. */
-function prefixHolds(prefix: string, pathname: string): boolean {
-  if (prefix === '/') return pathname === '/';
-  return pathname === prefix || pathname.startsWith(`${prefix}/`);
-}
-
-/**
- * Pure rule behind {@link useActiveSection}: the id of the menu whose `match`
- * prefixes (else its `href`) hold the pathname. The longest prefix wins, the
- * first menu on a tie; `null` when none holds it.
- */
-export function resolveActiveSection(menus: readonly NavMenu[], pathname: string | null | undefined): string | null {
-  const current = pathOf(pathname ?? undefined);
-  if (!current) return null;
-  let best: { id: string; length: number } | null = null;
-  for (const menu of menus) {
-    const prefixes = menu.match?.length ? menu.match : [menu.href];
-    for (const raw of prefixes) {
-      const prefix = pathOf(raw);
-      if (!prefix || !prefixHolds(prefix, current)) continue;
-      if (!best || prefix.length > best.length) best = { id: menu.id, length: prefix.length };
-    }
-  }
-  return best?.id ?? null;
-}
-
-/** The id of the top-level menu the current page belongs to, or `null`. */
-export function useActiveSection(menus: readonly NavMenu[], pathname: string | null | undefined): string | null {
-  return useMemo(() => resolveActiveSection(menus, pathname), [menus, pathname]);
-}