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

package/src/components/navigation/mobile-nav-sheet.tsx

@@ -1,241 +0,0 @@
-'use client';
-
-import { usePreventScroll } from '@react-aria/overlays';
-import type React from 'react';
-import { useRef, useState } from 'react';
-import { resolveActiveSection } from '../../hooks/ui/use-active-section';
-import { useFocusTrap } from '../../hooks/ui/use-focus-trap';
-import type { NavLink, NavMenu, SiteNav } from '../../types/navigation';
-import { cn } from '../../utils/cn';
-import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
-import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
-import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { Button } from '../ui/button';
-import { MingoAiButton } from './mingo-ai-button';
-import { MOBILE_NAV_SHEET_ID } from './mobile-nav-sheet-id';
-import { NavItemRow } from './nav-item-row';
-import { defaultRenderSiteNavLink, NAV_FOCUS_CLASS, type SiteNavLinkRenderer } from './site-nav-link';
-
-export { MOBILE_NAV_SHEET_ID } from './mobile-nav-sheet-id';
-
-export interface MobileNavSheetProps {
-  nav: SiteNav;
-  isOpen: boolean;
-  onClose: () => void;
-  /** The host router's pathname: the group holding the current page starts open. */
-  pathname: string;
-  logo: React.ReactNode;
-  renderLink?: SiteNavLinkRenderer;
-  /** The primary CTA node when `nav.primaryCta` is `'trial'` or `'waitlist'`. */
-  cta?: React.ReactNode;
-  /** Host nodes shown above the pinned CTA (a sign-up button). */
-  actions?: React.ReactNode;
-  /** The Mingo row at the top (`MingoAiButton variant="field"`): the assistant's
-   *  name and icon; `source` scopes the `ask-ai:open` event. Omitted: no row. */
-  askAI?: { source?: string; icon?: React.ReactNode; label?: string };
-  /** Host-added groups after the site's own (Profile, Admin). */
-  extraMenus?: NavMenu[];
-  /** Values for `NavLink.badgeKey`. */
-  badges?: Record<string, number>;
-  /** Rendered under the links of a menu with `showSocial`. */
-  social?: React.ReactNode;
-  /** Opaque ODS background class. Default `bg-ods-bg`. */
-  backgroundClassName?: string;
-}
-
-/**
- * Would the sheet list anything from this navigation? The header's menu button
- * and the sheet read this one answer (plus whatever the host adds: a profile
- * entry, a sign-up button), so a button never opens an empty sheet.
- */
-export function siteNavHasMobileMenus(nav: Pick<SiteNav, 'menus' | 'mobileMenus'>): boolean {
-  return (nav.mobileMenus ?? nav.menus).length > 0;
-}
-
-const GROUP_ROW_CLASS =
-  'flex min-h-14 w-full items-center justify-between gap-[var(--spacing-system-sf)] text-left text-ods-text-primary text-h4';
-
-const menuLinks = (menu: NavMenu): NavLink[] => [
-  ...(menu.columns ?? []).flatMap(group => group.links),
-  ...(menu.sideLinks ?? []),
-];
-
-/**
- * The site navigation below `lg`: a full-screen sheet drawn from the same
- * `SiteNav` as the header. Each menu with links is an accordion that expands
- * in place; the primary CTA and Sign in stay pinned at the bottom while the
- * body scrolls.
- *
- * Unmounted while closed (the header's panels are what crawlers read).
- */
-export function MobileNavSheet(props: MobileNavSheetProps) {
-  // The open groups are seeded from the page the sheet opens on, so the body
-  // mounts with the sheet: every open starts from the current section.
-  if (!props.isOpen) return null;
-  return <MobileNavSheetBody {...props} />;
-}
-
-function MobileNavSheetBody({
-  nav,
-  onClose,
-  pathname,
-  logo,
-  renderLink = defaultRenderSiteNavLink,
-  cta,
-  actions,
-  askAI,
-  extraMenus,
-  badges,
-  social,
-  backgroundClassName,
-}: MobileNavSheetProps) {
-  const sheetRef = useRef<HTMLDivElement>(null);
-  const menus = [...(nav.mobileMenus ?? nav.menus), ...(extraMenus ?? [])];
-
-  // Shared ref-counted, iOS-aware scroll lock (react-aria): one counter with
-  // the modals and chat overlays, restores prior styles on release.
-  usePreventScroll();
-  // Initial focus, Tab containment, Escape-to-close, guarded focus restore.
-  useFocusTrap(sheetRef, true, { onEscape: onClose });
-
-  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
-    const active = resolveActiveSection(menus, pathname);
-    return active ? { [active]: true } : {};
-  });
-
-  const primaryCta =
-    typeof nav.primaryCta === 'object' ? (
-      <Button variant="accent" href={nav.primaryCta.href} onClick={onClose} className="w-full">
-        {nav.primaryCta.label}
-      </Button>
-    ) : nav.primaryCta === 'none' ? null : (
-      (cta ?? null)
-    );
-  const hasFooter = !!actions || !!primaryCta || !!nav.signIn;
-
-  return (
-    <div
-      ref={sheetRef}
-      id={MOBILE_NAV_SHEET_ID}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Navigation menu"
-      tabIndex={-1}
-      // Small-viewport height: 100vh overflowed under mobile browser chrome,
-      // leaving the pinned CTA unreachable while the body was scroll-locked.
-      className={cn(
-        'fixed inset-0 z-[9999] flex h-[100svh] flex-col text-ods-text-primary outline-none',
-        backgroundClassName ?? 'bg-ods-bg',
-      )}
-    >
-      <div className="flex h-14 shrink-0 items-center justify-between border-b border-ods-border pl-5 pr-[var(--spacing-system-xsf)]">
-        <div className="flex min-w-0 items-center">{logo}</div>
-        <Button
-          type="button"
-          variant="transparent"
-          size="icon"
-          aria-label="Close menu"
-          onClick={onClose}
-          className={cn('h-11 w-11 shrink-0 md:h-11 md:w-11', NAV_FOCUS_CLASS)}
-        >
-          <XmarkIcon aria-hidden="true" className="!h-6 !w-6" />
-        </Button>
-      </div>
-
-      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-5">
-        {askAI && (
-          <MingoAiButton
-            variant="field"
-            source={askAI.source}
-            icon={askAI.icon}
-            label={askAI.label}
-            onClick={onClose}
-          />
-        )}
-
-        <nav aria-label="Main">
-          {menus.map(menu => {
-            const links = menuLinks(menu);
-            if (links.length === 0) {
-              if (!menu.href) return null;
-              return (
-                <div key={menu.id} className="border-b border-ods-border">
-                  {renderLink({
-                    link: { href: menu.href },
-                    className: cn(GROUP_ROW_CLASS, NAV_FOCUS_CLASS),
-                    onClick: onClose,
-                    children: (
-                      <>
-                        {menu.label}
-                        <Chevron02RightIcon aria-hidden="true" className="h-5 w-5 shrink-0 text-ods-text-muted" />
-                      </>
-                    ),
-                  })}
-                </div>
-              );
-            }
-
-            const open = !!openGroups[menu.id];
-            const listId = `${MOBILE_NAV_SHEET_ID}-${menu.id}`;
-            return (
-              <div key={menu.id} className="border-b border-ods-border">
-                <Button
-                  type="button"
-                  variant="glyph"
-                  size="wrap"
-                  font="regular"
-                  aria-expanded={open}
-                  aria-controls={open ? listId : undefined}
-                  onClick={() => setOpenGroups(prev => ({ ...prev, [menu.id]: !prev[menu.id] }))}
-                  className={cn(GROUP_ROW_CLASS, NAV_FOCUS_CLASS)}
-                >
-                  {menu.label}
-                  <Chevron02DownIcon
-                    aria-hidden="true"
-                    className={cn(
-                      'h-5 w-5 shrink-0 text-ods-text-muted transition-transform duration-150',
-                      open && 'rotate-180',
-                    )}
-                  />
-                </Button>
-                {open && (
-                  <div id={listId} className="flex flex-col pb-[var(--spacing-system-sf)]">
-                    {links.map(link => (
-                      <NavItemRow
-                        key={link.id}
-                        link={link}
-                        variant="sheet"
-                        renderLink={renderLink}
-                        badge={link.badgeKey ? badges?.[link.badgeKey] : undefined}
-                        onNavigate={onClose}
-                      />
-                    ))}
-                    {menu.showSocial && social && <div className="pt-[var(--spacing-system-xsf)]">{social}</div>}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </nav>
-      </div>
-
-      {/* Pinned: stays visible while the body scrolls, clears the iOS home indicator. */}
-      {hasFooter && (
-        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] border-t border-ods-border px-5 pb-[max(1.75rem,env(safe-area-inset-bottom))] pt-[var(--spacing-system-mf)] [&_a]:w-full [&_button]:w-full">
-          {actions}
-          {primaryCta}
-          {nav.signIn &&
-            renderLink({
-              link: nav.signIn,
-              className: cn(
-                'flex h-12 items-center justify-center rounded-md text-ods-text-primary text-h4',
-                NAV_FOCUS_CLASS,
-              ),
-              onClick: onClose,
-              children: nav.signIn.label,
-            })}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/navigation/nav-item-row.tsx

@@ -1,129 +0,0 @@
-'use client';
-
-import type React from 'react';
-import type { NavLink } from '../../types/navigation';
-import { cn } from '../../utils/cn';
-import { EntityIcon } from '../icon-display';
-import { defaultRenderSiteNavLink, NAV_FOCUS_CLASS, navLinkLabel, type SiteNavLinkRenderer } from './site-nav-link';
-import { UnreadCountBadge } from './unread-dot';
-
-export type NavItemRowVariant = 'panel' | 'sheet' | 'side' | 'label';
-
-export interface NavItemRowProps {
-  link: NavLink;
-  /**
-   * - `panel` (default): a desktop menu row, 36px icon tile, label, description.
-   * - `sheet`: the mobile sheet's row, 32px tile, at least 52px tall.
-   * - `side`: a mega menu's side list, a small bare icon and the label.
-   * - `label`: the label only (footer columns).
-   */
-  variant?: NavItemRowVariant;
-  renderLink?: SiteNavLinkRenderer;
-  /** The live counter for `link.badgeKey`; nothing renders at 0 or undefined. */
-  badge?: number;
-  /** Called on activation, so the menu or sheet holding the row can close. */
-  onNavigate?: () => void;
-  className?: string;
-}
-
-// Box and colour per variant; every text step is an ODS composite.
-const ROW_CLASSES: Record<NavItemRowVariant, string> = {
-  panel:
-    'flex items-start gap-[var(--spacing-system-sf)] rounded-lg p-[var(--spacing-system-sf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover',
-  sheet: 'flex min-h-[52px] items-center gap-[var(--spacing-system-sf)] py-1.5 text-ods-text-primary',
-  side: 'flex items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-sf)] py-2.5 text-ods-text-secondary transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary',
-  label:
-    'inline-flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary transition-colors text-h6 hover:text-ods-text-primary',
-};
-
-function RowGlyph({ link, box, glyph }: { link: NavLink; box: string; glyph: number }) {
-  // A server-configured icon (an agent's avatar) is drawn round and whole.
-  if (link.icon) {
-    return (
-      <span
-        aria-hidden="true"
-        className={cn('flex shrink-0 items-center justify-center overflow-hidden rounded-full', box)}
-      >
-        <EntityIcon icon={link.icon} className="h-full w-full" />
-      </span>
-    );
-  }
-  if (!link.iconName) return null;
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        'flex shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-text-primary',
-        box,
-      )}
-    >
-      <EntityIcon icon={{ name: link.iconName }} size={glyph} />
-    </span>
-  );
-}
-
-/**
- * One navigation row, shared by the desktop panels, the mobile sheet and the
- * footer columns: icon tile or agent avatar, label, description, the
- * "Built on ..." line and an optional live counter.
- */
-export function NavItemRow({
-  link,
-  variant = 'panel',
-  renderLink = defaultRenderSiteNavLink,
-  badge,
-  onNavigate,
-  className,
-}: NavItemRowProps) {
-  const label = navLinkLabel(link);
-  const counter = badge ? <UnreadCountBadge count={badge} className="static shrink-0" /> : null;
-  // A row with one line of text centres it on its icon; with a description or
-  // a "Built on" line the label stays level with the icon's top.
-  const singleLine = !link.description && !link.builtOn;
-  const rowClassName = cn(
-    ROW_CLASSES[variant],
-    variant === 'panel' && singleLine && 'items-center',
-    NAV_FOCUS_CLASS,
-    className,
-  );
-  const onClick = onNavigate ? () => onNavigate() : undefined;
-
-  let children: React.ReactNode;
-  if (variant === 'label') {
-    children = (
-      <>
-        {label}
-        {counter}
-      </>
-    );
-  } else if (variant === 'side') {
-    children = (
-      <>
-        {link.iconName && (
-          <span aria-hidden="true" className="flex shrink-0">
-            <EntityIcon icon={{ name: link.iconName }} size={18} />
-          </span>
-        )}
-        <span className="min-w-0 flex-1">{label}</span>
-        {counter}
-      </>
-    );
-  } else {
-    const sheet = variant === 'sheet';
-    children = (
-      <>
-        <RowGlyph link={link} box={sheet ? 'h-8 w-8' : 'h-9 w-9'} glyph={sheet ? 18 : 20} />
-        <span className="flex min-w-0 flex-1 flex-col">
-          <span className="flex items-center gap-[var(--spacing-system-xsf)] text-h6">
-            <span className="min-w-0">{label}</span>
-            {counter}
-          </span>
-          {link.description && <span className="text-ods-text-muted text-h6">{link.description}</span>}
-          {link.builtOn && <span className="text-ods-text-muted text-h6">Built on {link.builtOn}</span>}
-        </span>
-      </>
-    );
-  }
-
-  return <>{renderLink({ link, className: rowClassName, children, onClick })}</>;
-}

package/src/components/navigation/nav-panel.tsx

@@ -1,196 +0,0 @@
-'use client';
-
-import type React from 'react';
-import { forwardRef, type HTMLAttributes } from 'react';
-import type { NavGroup, NavMenu } from '../../types/navigation';
-import { cn } from '../../utils/cn';
-import { CaseStudyCard } from '../chat/entity-cards/case-study-card';
-import { NavItemRow } from './nav-item-row';
-import { defaultRenderSiteNavLink, type SiteNavLinkRenderer } from './site-nav-link';
-
-/** A column with more links than this lays them out in two columns. */
-const TWO_COLUMN_OVER = 4;
-
-/** True when a menu opens the full-width mega panel instead of a dropdown list. */
-export function isMegaMenu(menu: Pick<NavMenu, 'columns' | 'features' | 'sideLinks'>): boolean {
-  return (menu.columns?.length ?? 0) > 1 || !!menu.features?.length || !!menu.sideLinks?.length;
-}
-
-export interface NavPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  menu: NavMenu;
-  open: boolean;
-  renderLink?: SiteNavLinkRenderer;
-  /** Values for `NavLink.badgeKey`. */
-  badges?: Record<string, number>;
-  /** Rendered under the links of a menu with `showSocial`. */
-  social?: React.ReactNode;
-  /** Called when a link is activated, so the owner can close the menu. */
-  onNavigate?: () => void;
-  /**
-   * How an OPEN mega menu arrived: `open` from a closed bar (the panel fades
-   * in), `from-start` / `from-end` from the mega menu before or after it in
-   * the row (the surface stays put and only the content slides in from that
-   * side). Default `open`.
-   */
-  motion?: NavPanelMotion;
-  /**
-   * Another mega menu is open: this closed one leaves without a fade, so the
-   * two panels never show through each other mid-switch.
-   */
-  handoff?: boolean;
-}
-
-export type NavPanelMotion = 'open' | 'from-start' | 'from-end';
-
-const HEADING_CLASS = 'mb-[var(--spacing-system-xsf)] ml-[var(--spacing-system-sf)] text-ods-text-muted text-h5';
-
-function Column({
-  group,
-  wide,
-  rowProps,
-}: {
-  group: NavGroup;
-  wide: boolean;
-  rowProps: Pick<NavPanelProps, 'renderLink' | 'badges' | 'onNavigate'>;
-}) {
-  const twoColumns = wide && group.links.length > TWO_COLUMN_OVER;
-  return (
-    <div className={cn('flex min-w-0 flex-col', wide && (twoColumns ? 'flex-[2]' : 'flex-1'))}>
-      {group.title && <div className={HEADING_CLASS}>{group.title}</div>}
-      <div
-        className={
-          twoColumns
-            ? 'grid grid-cols-2 gap-x-[var(--spacing-system-mf)] gap-y-[var(--spacing-system-xxs)]'
-            : 'flex flex-col gap-[var(--spacing-system-xxs)]'
-        }
-      >
-        {group.links.map(link => (
-          <NavItemRow
-            key={link.id}
-            link={link}
-            renderLink={rowProps.renderLink}
-            onNavigate={rowProps.onNavigate}
-            badge={link.badgeKey ? rowProps.badges?.[link.badgeKey] : undefined}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/**
- * The panel a header menu opens, in the one shape its data asks for: a single
- * column is a compact dropdown under its trigger; more than one column, or
- * features, or side links make the full-width mega menu under the bar.
- *
- * Always in the DOM, so crawlers see every link; closed, it is `inert` (out of
- * the tab order and the accessibility tree, which `aria-hidden` alone would
- * not do) and invisible. Plain `<div>`s on purpose: these are disclosures of
- * links, not an ARIA menu, so there is no `role="menu"` and Tab moves through
- * the links in DOM order.
- */
-export const NavPanel = forwardRef<HTMLDivElement, NavPanelProps>(function NavPanelImpl(
-  {
-    menu,
-    open,
-    renderLink = defaultRenderSiteNavLink,
-    badges,
-    social,
-    onNavigate,
-    motion = 'open',
-    handoff = false,
-    className,
-    ...panelProps
-  }: NavPanelProps,
-  ref,
-) {
-  const columns = menu.columns ?? [];
-  const mega = isMegaMenu(menu);
-  const rowProps = { renderLink, badges, onNavigate };
-  const socialRow = menu.showSocial && social ? social : null;
-
-  return (
-    <div
-      inert={!open}
-      data-state={open ? 'open' : 'closed'}
-      {...panelProps}
-      ref={ref}
-      className={cn(
-        'absolute top-full z-[60]',
-        // Between two mega menus the surface is handed over in one frame (same
-        // place, same size, same colour) and only the content moves; a fade
-        // here would let the page show through both for its whole length.
-        mega && (open ? motion !== 'open' : handoff) ? 'transition-none' : 'transition-opacity duration-150',
-        mega
-          ? 'left-0 right-0 border-b border-ods-border bg-ods-card shadow-xl'
-          : 'left-0 mt-[var(--spacing-system-xxs)] min-w-[260px] rounded-lg border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] shadow-xl',
-        open ? 'visible opacity-100' : 'pointer-events-none invisible opacity-0',
-        className,
-      )}
-    >
-      {mega ? (
-        // ONE height for every mega menu, so moving between menus (and a
-        // card's cover loading) never resizes the panel under the pointer.
-        <div
-          data-motion={open ? motion : undefined}
-          className="nav-panel-content flex h-[400px] max-h-[calc(100svh-var(--top-nav-height,72px))] flex-col gap-[var(--spacing-system-mf)] overflow-y-auto px-[var(--spacing-system-lf)] pb-[var(--spacing-system-xlf)] pt-8"
-        >
-          <div className="flex min-h-0 flex-1 gap-[var(--spacing-system-xlf)]">
-            {columns.map(group => (
-              <Column key={group.id} group={group} wide rowProps={rowProps} />
-            ))}
-            {!!menu.features?.length && (
-              // One row of cards, as many as the bar's width holds: a card that
-              // would wrap lands on a zero-height row, where its cell clips it.
-              <div className="grid min-w-0 flex-[3] auto-rows-[0px] grid-cols-[repeat(auto-fit,minmax(240px,1fr))] grid-rows-[minmax(0,1fr)] gap-x-[var(--spacing-system-mf)]">
-                {menu.features.map(feature => (
-                  <div key={feature.id} className="min-h-0 min-w-0 overflow-hidden">
-                    <CaseStudyCard
-                      size="menu"
-                      study={feature.study}
-                      href={feature.href}
-                      mediaMounted={open}
-                      onNavigate={onNavigate}
-                      className="h-full"
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-            {!!menu.sideLinks?.length && (
-              <div className="flex w-[260px] shrink-0 flex-col gap-0.5 border-l border-ods-border pl-8 pt-5">
-                {menu.sideTitle && <div className={HEADING_CLASS}>{menu.sideTitle}</div>}
-                {menu.sideLinks.map(link => (
-                  <NavItemRow
-                    key={link.id}
-                    link={link}
-                    variant="side"
-                    {...rowProps}
-                    badge={link.badgeKey ? badges?.[link.badgeKey] : undefined}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-          {socialRow && (
-            <div className="border-t border-ods-border px-[var(--spacing-system-sf)] pt-[var(--spacing-system-mf)]">
-              {socialRow}
-            </div>
-          )}
-        </div>
-      ) : (
-        <>
-          {columns.map(group => (
-            <Column key={group.id} group={group} wide={false} rowProps={rowProps} />
-          ))}
-          {socialRow && (
-            <div className="mt-[var(--spacing-system-xsf)] border-t border-ods-border px-[var(--spacing-system-sf)] pt-[var(--spacing-system-sf)]">
-              {socialRow}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-});
-NavPanel.displayName = 'NavPanel';