@flopay/ui 0.4.0 → 0.6.0

package/dist/marketing/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/marketing/index.ts","../../src/marketing/footer.tsx","../../src/cn.ts","../../src/marketing/link.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["export type { FooterBrand, FooterColumn, FooterLink, FooterProps } from './footer';\nexport { Footer } from './footer';\nexport type { MarketingLinkProps } from './link';\nexport { MarketingLink } from './link';\nexport type { NavLink, NavLogo, NavProps } from './nav';\nexport { Nav } from './nav';\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {column.links.map((link) => (\n                <li key={link.href}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["Link","import_jsx_runtime","Image","import_image","import_jsx_runtime","Image"]}
+{"version":3,"sources":["../../src/marketing/index.ts","../../src/marketing/footer.tsx","../../src/cn.ts","../../src/marketing/link.tsx","../../src/marketing/flopay-footer.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["export type {\n  FlopayFooterContent,\n  FlopayFooterOptions,\n  FlopayFooterProps,\n} from './flopay-footer';\nexport { FlopayFooter, flopayFooterContent } from './flopay-footer';\nexport type { FooterBrand, FooterColumn, FooterLink, FooterProps } from './footer';\nexport { Footer } from './footer';\nexport type { MarketingLinkProps } from './link';\nexport { MarketingLink } from './link';\nexport type { NavLink, NavLogo, NavProps } from './nav';\nexport { Nav } from './nav';\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {/* Keyed by index: placeholder links legitimately share an href. */}\n              {column.links.map((link, linkIndex) => (\n                <li key={linkIndex}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import type { ImageProps } from 'next/image';\nimport type { FooterBrand, FooterColumn, FooterLink } from './footer';\nimport { Footer } from './footer';\n\nexport interface FlopayFooterOptions {\n  /**\n   * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on\n   * the marketing site itself so its own routes stay relative.\n   */\n  baseUrl?: string;\n  /** Where \"Demo Playground\" points. Defaults to the hosted playground. */\n  demoUrl?: string;\n  /** Where \"Contact\" points. Defaults to `<baseUrl>/contact`. */\n  contactUrl?: string;\n}\n\nexport interface FlopayFooterContent {\n  tagline: string;\n  columns: FooterColumn[];\n  legal: FooterLink[];\n  copyright: string;\n}\n\nconst TAGLINE = 'Payment Orchestration That Keeps Revenue Flowing';\nconst COMPANY = 'FloPay LLC';\nconst DOCS_URL = 'https://docs.flopay.com/docs';\nconst API_URL = 'https://api.flopay.com/docs';\nconst DEMO_URL = 'https://demo.flopay.com';\n\n/**\n * The FloPay footer sitemap — one source of truth so every portal shows the\n * same columns, labels and order.\n *\n * Products without a page yet point at the marketing home page (`#` when the\n * caller *is* the marketing site, where that would be a self-link).\n */\nexport function flopayFooterContent({\n  baseUrl = '',\n  demoUrl = DEMO_URL,\n  contactUrl,\n}: FlopayFooterOptions = {}): FlopayFooterContent {\n  const route = (path: string) => `${baseUrl}${path}`;\n  const pending = baseUrl || '#';\n\n  return {\n    tagline: TAGLINE,\n    columns: [\n      {\n        title: 'Product',\n        links: [\n          { href: route('/vault'), label: 'Card Vault' },\n          { href: route('/chargeback-prevention'), label: 'Chargeback Prevention' },\n          { href: pending, label: 'Agent-Assisted Commerce' },\n          { href: pending, label: 'The Agent Vault' },\n          { href: pending, label: 'Agentic Discovery Network' },\n          { href: pending, label: 'Smart Agentic Orchestration' },\n        ],\n      },\n      {\n        title: 'Development',\n        links: [\n          { href: DOCS_URL, label: 'Documentation' },\n          { href: pending, label: 'MCP Server' },\n          { href: API_URL, label: 'API Reference' },\n          { href: demoUrl, label: 'Demo Playground' },\n        ],\n      },\n      {\n        title: 'Company',\n        links: [\n          { href: route('/mission'), label: 'Mission' },\n          { href: route('/values'), label: 'Values' },\n          { href: route('/pricing'), label: 'Pricing' },\n          { href: route('/blog'), label: 'Blog' },\n          { href: contactUrl ?? route('/contact'), label: 'Contact' },\n        ],\n      },\n    ],\n    legal: [\n      { href: route('/legal/privacy'), label: 'Privacy' },\n      { href: route('/legal/terms'), label: 'Terms' },\n      { href: route('/legal/cookies'), label: 'Cookies' },\n    ],\n    copyright: `© ${new Date().getFullYear()} ${COMPANY}. All rights reserved.`,\n  };\n}\n\nexport interface FlopayFooterProps extends FlopayFooterOptions {\n  /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */\n  logo: ImageProps['src'];\n  /** Override parts of the default brand block (label, tagline, size, …). */\n  brand?: Partial<Omit<FooterBrand, 'src'>>;\n  className?: string;\n}\n\n/**\n * The FloPay footer, content included — drop it into any portal and the\n * sitemap, tagline and copyright come from this package.\n *\n * ```tsx\n * import logo from '@flopay/ui/logo.png';\n * <FlopayFooter logo={logo} />                              // on flopay.com\n * <FlopayFooter logo={logo} baseUrl=\"https://flopay.com\" /> // anywhere else\n * ```\n */\nexport function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps) {\n  const { tagline, columns, legal, copyright } = flopayFooterContent(options);\n\n  return (\n    <Footer\n      className={className}\n      brand={{\n        src: logo,\n        alt: 'FloPay',\n        label: 'FloPay',\n        href: options.baseUrl || '/',\n        size: 20,\n        mark: true,\n        tagline,\n        ...brand,\n      }}\n      columns={columns}\n      legal={legal}\n      copyright={copyright}\n    />\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {/* Keyed by index: placeholder links legitimately share an href.\n              `nav-link-item` is what the narrow-viewport rule hides, so the\n              call to action survives on mobile while the rest collapse. */}\n          {links.map((link, index) => (\n            <li key={index} className={link.cta ? undefined : 'nav-link-item'}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["Link","import_jsx_runtime","Image","import_jsx_runtime","import_image","import_jsx_runtime","Image"]}

package/dist/marketing/index.d.cts

@@ -31,6 +31,50 @@ interface FooterProps {
 /** Shared site footer for marketing surfaces (landing, demo). */
 declare function Footer({ brand, columns, legal, copyright, className }: FooterProps): react.JSX.Element;
 
+interface FlopayFooterOptions {
+    /**
+     * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on
+     * the marketing site itself so its own routes stay relative.
+     */
+    baseUrl?: string;
+    /** Where "Demo Playground" points. Defaults to the hosted playground. */
+    demoUrl?: string;
+    /** Where "Contact" points. Defaults to `<baseUrl>/contact`. */
+    contactUrl?: string;
+}
+interface FlopayFooterContent {
+    tagline: string;
+    columns: FooterColumn[];
+    legal: FooterLink[];
+    copyright: string;
+}
+/**
+ * The FloPay footer sitemap — one source of truth so every portal shows the
+ * same columns, labels and order.
+ *
+ * Products without a page yet point at the marketing home page (`#` when the
+ * caller *is* the marketing site, where that would be a self-link).
+ */
+declare function flopayFooterContent({ baseUrl, demoUrl, contactUrl, }?: FlopayFooterOptions): FlopayFooterContent;
+interface FlopayFooterProps extends FlopayFooterOptions {
+    /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */
+    logo: ImageProps['src'];
+    /** Override parts of the default brand block (label, tagline, size, …). */
+    brand?: Partial<Omit<FooterBrand, 'src'>>;
+    className?: string;
+}
+/**
+ * The FloPay footer, content included — drop it into any portal and the
+ * sitemap, tagline and copyright come from this package.
+ *
+ * ```tsx
+ * import logo from '@flopay/ui/logo.png';
+ * <FlopayFooter logo={logo} />                              // on flopay.com
+ * <FlopayFooter logo={logo} baseUrl="https://flopay.com" /> // anywhere else
+ * ```
+ */
+declare function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps): react.JSX.Element;
+
 interface MarketingLinkProps {
     href: string;
     /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */
@@ -74,4 +118,4 @@ interface NavProps {
 /** Shared fixed top navigation for marketing surfaces (landing, demo). */
 declare function Nav({ logo, links, children, className }: NavProps): react.JSX.Element;
 
-export { Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps };
+export { FlopayFooter, type FlopayFooterContent, type FlopayFooterOptions, type FlopayFooterProps, Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps, flopayFooterContent };

package/dist/marketing/index.d.ts

@@ -31,6 +31,50 @@ interface FooterProps {
 /** Shared site footer for marketing surfaces (landing, demo). */
 declare function Footer({ brand, columns, legal, copyright, className }: FooterProps): react.JSX.Element;
 
+interface FlopayFooterOptions {
+    /**
+     * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on
+     * the marketing site itself so its own routes stay relative.
+     */
+    baseUrl?: string;
+    /** Where "Demo Playground" points. Defaults to the hosted playground. */
+    demoUrl?: string;
+    /** Where "Contact" points. Defaults to `<baseUrl>/contact`. */
+    contactUrl?: string;
+}
+interface FlopayFooterContent {
+    tagline: string;
+    columns: FooterColumn[];
+    legal: FooterLink[];
+    copyright: string;
+}
+/**
+ * The FloPay footer sitemap — one source of truth so every portal shows the
+ * same columns, labels and order.
+ *
+ * Products without a page yet point at the marketing home page (`#` when the
+ * caller *is* the marketing site, where that would be a self-link).
+ */
+declare function flopayFooterContent({ baseUrl, demoUrl, contactUrl, }?: FlopayFooterOptions): FlopayFooterContent;
+interface FlopayFooterProps extends FlopayFooterOptions {
+    /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */
+    logo: ImageProps['src'];
+    /** Override parts of the default brand block (label, tagline, size, …). */
+    brand?: Partial<Omit<FooterBrand, 'src'>>;
+    className?: string;
+}
+/**
+ * The FloPay footer, content included — drop it into any portal and the
+ * sitemap, tagline and copyright come from this package.
+ *
+ * ```tsx
+ * import logo from '@flopay/ui/logo.png';
+ * <FlopayFooter logo={logo} />                              // on flopay.com
+ * <FlopayFooter logo={logo} baseUrl="https://flopay.com" /> // anywhere else
+ * ```
+ */
+declare function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps): react.JSX.Element;
+
 interface MarketingLinkProps {
     href: string;
     /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */
@@ -74,4 +118,4 @@ interface NavProps {
 /** Shared fixed top navigation for marketing surfaces (landing, demo). */
 declare function Nav({ logo, links, children, className }: NavProps): react.JSX.Element;
 
-export { Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps };
+export { FlopayFooter, type FlopayFooterContent, type FlopayFooterOptions, type FlopayFooterProps, Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps, flopayFooterContent };

package/dist/marketing/index.mjs

@@ -37,7 +37,7 @@ function Footer({ brand, columns = [], legal = [], copyright, className }) {
       ] }),
       columns.map((column, index) => /* @__PURE__ */ jsxs("div", { className: "footer-column", children: [
         /* @__PURE__ */ jsx2("h4", { children: column.title }),
-        /* @__PURE__ */ jsx2("ul", { children: column.links.map((link) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, link.href)) })
+        /* @__PURE__ */ jsx2("ul", { children: column.links.map((link, linkIndex) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, linkIndex)) })
       ] }, index))
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "footer-bottom", children: [
@@ -47,19 +47,98 @@ function Footer({ brand, columns = [], legal = [], copyright, className }) {
   ] });
 }
 
+// src/marketing/flopay-footer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TAGLINE = "Payment Orchestration That Keeps Revenue Flowing";
+var COMPANY = "FloPay LLC";
+var DOCS_URL = "https://docs.flopay.com/docs";
+var API_URL = "https://api.flopay.com/docs";
+var DEMO_URL = "https://demo.flopay.com";
+function flopayFooterContent({
+  baseUrl = "",
+  demoUrl = DEMO_URL,
+  contactUrl
+} = {}) {
+  const route = (path) => `${baseUrl}${path}`;
+  const pending = baseUrl || "#";
+  return {
+    tagline: TAGLINE,
+    columns: [
+      {
+        title: "Product",
+        links: [
+          { href: route("/vault"), label: "Card Vault" },
+          { href: route("/chargeback-prevention"), label: "Chargeback Prevention" },
+          { href: pending, label: "Agent-Assisted Commerce" },
+          { href: pending, label: "The Agent Vault" },
+          { href: pending, label: "Agentic Discovery Network" },
+          { href: pending, label: "Smart Agentic Orchestration" }
+        ]
+      },
+      {
+        title: "Development",
+        links: [
+          { href: DOCS_URL, label: "Documentation" },
+          { href: pending, label: "MCP Server" },
+          { href: API_URL, label: "API Reference" },
+          { href: demoUrl, label: "Demo Playground" }
+        ]
+      },
+      {
+        title: "Company",
+        links: [
+          { href: route("/mission"), label: "Mission" },
+          { href: route("/values"), label: "Values" },
+          { href: route("/pricing"), label: "Pricing" },
+          { href: route("/blog"), label: "Blog" },
+          { href: contactUrl ?? route("/contact"), label: "Contact" }
+        ]
+      }
+    ],
+    legal: [
+      { href: route("/legal/privacy"), label: "Privacy" },
+      { href: route("/legal/terms"), label: "Terms" },
+      { href: route("/legal/cookies"), label: "Cookies" }
+    ],
+    copyright: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${COMPANY}. All rights reserved.`
+  };
+}
+function FlopayFooter({ logo, brand, className, ...options }) {
+  const { tagline, columns, legal, copyright } = flopayFooterContent(options);
+  return /* @__PURE__ */ jsx3(
+    Footer,
+    {
+      className,
+      brand: {
+        src: logo,
+        alt: "FloPay",
+        label: "FloPay",
+        href: options.baseUrl || "/",
+        size: 20,
+        mark: true,
+        tagline,
+        ...brand
+      },
+      columns,
+      legal,
+      copyright
+    }
+  );
+}
+
 // src/marketing/nav.tsx
 import Image2 from "next/image";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Nav({ logo, links = [], children, className }) {
   const size = logo.size ?? 28;
-  const image = /* @__PURE__ */ jsx3(Image2, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
-  return /* @__PURE__ */ jsx3("nav", { className: cn("nav", className), children: /* @__PURE__ */ jsxs2("div", { className: "nav-inner", children: [
+  const image = /* @__PURE__ */ jsx4(Image2, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
+  return /* @__PURE__ */ jsx4("nav", { className: cn("nav", className), children: /* @__PURE__ */ jsxs2("div", { className: "nav-inner", children: [
     /* @__PURE__ */ jsxs2(MarketingLink, { href: logo.href ?? "/", className: "nav-logo", children: [
-      logo.mark ? /* @__PURE__ */ jsx3("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+      logo.mark ? /* @__PURE__ */ jsx4("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
       logo.label
     ] }),
     /* @__PURE__ */ jsxs2("ul", { className: "nav-links", children: [
-      links.map((link) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+      links.map((link, index) => /* @__PURE__ */ jsx4("li", { className: link.cta ? void 0 : "nav-link-item", children: /* @__PURE__ */ jsx4(
         MarketingLink,
         {
           href: link.href,
@@ -67,14 +146,16 @@ function Nav({ logo, links = [], children, className }) {
           className: link.cta ? "nav-cta" : void 0,
           children: link.label
         }
-      ) }, link.href)),
-      children ? /* @__PURE__ */ jsx3("li", { children }) : null
+      ) }, index)),
+      children ? /* @__PURE__ */ jsx4("li", { children }) : null
     ] })
   ] }) });
 }
 export {
+  FlopayFooter,
   Footer,
   MarketingLink,
-  Nav
+  Nav,
+  flopayFooterContent
 };
 //# sourceMappingURL=index.mjs.map

package/dist/marketing/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/marketing/footer.tsx","../../src/marketing/link.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {column.links.map((link) => (\n                <li key={link.href}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["jsx","Image","jsx","jsxs","Image"]}
+{"version":3,"sources":["../../src/marketing/footer.tsx","../../src/marketing/link.tsx","../../src/marketing/flopay-footer.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {/* Keyed by index: placeholder links legitimately share an href. */}\n              {column.links.map((link, linkIndex) => (\n                <li key={linkIndex}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import type { ImageProps } from 'next/image';\nimport type { FooterBrand, FooterColumn, FooterLink } from './footer';\nimport { Footer } from './footer';\n\nexport interface FlopayFooterOptions {\n  /**\n   * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on\n   * the marketing site itself so its own routes stay relative.\n   */\n  baseUrl?: string;\n  /** Where \"Demo Playground\" points. Defaults to the hosted playground. */\n  demoUrl?: string;\n  /** Where \"Contact\" points. Defaults to `<baseUrl>/contact`. */\n  contactUrl?: string;\n}\n\nexport interface FlopayFooterContent {\n  tagline: string;\n  columns: FooterColumn[];\n  legal: FooterLink[];\n  copyright: string;\n}\n\nconst TAGLINE = 'Payment Orchestration That Keeps Revenue Flowing';\nconst COMPANY = 'FloPay LLC';\nconst DOCS_URL = 'https://docs.flopay.com/docs';\nconst API_URL = 'https://api.flopay.com/docs';\nconst DEMO_URL = 'https://demo.flopay.com';\n\n/**\n * The FloPay footer sitemap — one source of truth so every portal shows the\n * same columns, labels and order.\n *\n * Products without a page yet point at the marketing home page (`#` when the\n * caller *is* the marketing site, where that would be a self-link).\n */\nexport function flopayFooterContent({\n  baseUrl = '',\n  demoUrl = DEMO_URL,\n  contactUrl,\n}: FlopayFooterOptions = {}): FlopayFooterContent {\n  const route = (path: string) => `${baseUrl}${path}`;\n  const pending = baseUrl || '#';\n\n  return {\n    tagline: TAGLINE,\n    columns: [\n      {\n        title: 'Product',\n        links: [\n          { href: route('/vault'), label: 'Card Vault' },\n          { href: route('/chargeback-prevention'), label: 'Chargeback Prevention' },\n          { href: pending, label: 'Agent-Assisted Commerce' },\n          { href: pending, label: 'The Agent Vault' },\n          { href: pending, label: 'Agentic Discovery Network' },\n          { href: pending, label: 'Smart Agentic Orchestration' },\n        ],\n      },\n      {\n        title: 'Development',\n        links: [\n          { href: DOCS_URL, label: 'Documentation' },\n          { href: pending, label: 'MCP Server' },\n          { href: API_URL, label: 'API Reference' },\n          { href: demoUrl, label: 'Demo Playground' },\n        ],\n      },\n      {\n        title: 'Company',\n        links: [\n          { href: route('/mission'), label: 'Mission' },\n          { href: route('/values'), label: 'Values' },\n          { href: route('/pricing'), label: 'Pricing' },\n          { href: route('/blog'), label: 'Blog' },\n          { href: contactUrl ?? route('/contact'), label: 'Contact' },\n        ],\n      },\n    ],\n    legal: [\n      { href: route('/legal/privacy'), label: 'Privacy' },\n      { href: route('/legal/terms'), label: 'Terms' },\n      { href: route('/legal/cookies'), label: 'Cookies' },\n    ],\n    copyright: `© ${new Date().getFullYear()} ${COMPANY}. All rights reserved.`,\n  };\n}\n\nexport interface FlopayFooterProps extends FlopayFooterOptions {\n  /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */\n  logo: ImageProps['src'];\n  /** Override parts of the default brand block (label, tagline, size, …). */\n  brand?: Partial<Omit<FooterBrand, 'src'>>;\n  className?: string;\n}\n\n/**\n * The FloPay footer, content included — drop it into any portal and the\n * sitemap, tagline and copyright come from this package.\n *\n * ```tsx\n * import logo from '@flopay/ui/logo.png';\n * <FlopayFooter logo={logo} />                              // on flopay.com\n * <FlopayFooter logo={logo} baseUrl=\"https://flopay.com\" /> // anywhere else\n * ```\n */\nexport function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps) {\n  const { tagline, columns, legal, copyright } = flopayFooterContent(options);\n\n  return (\n    <Footer\n      className={className}\n      brand={{\n        src: logo,\n        alt: 'FloPay',\n        label: 'FloPay',\n        href: options.baseUrl || '/',\n        size: 20,\n        mark: true,\n        tagline,\n        ...brand,\n      }}\n      columns={columns}\n      legal={legal}\n      copyright={copyright}\n    />\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {/* Keyed by index: placeholder links legitimately share an href.\n              `nav-link-item` is what the narrow-viewport rule hides, so the\n              call to action survives on mobile while the rest collapse. */}\n          {links.map((link, index) => (\n            <li key={index} className={link.cta ? undefined : 'nav-link-item'}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","Image","jsx","jsxs","Image"]}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@flopay/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@11.17.0",
   "description": "FloPay shared design system — design tokens, a Tailwind v4 preset, and React primitives shared across landing, demo, docs, and dashboard.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -27,12 +27,18 @@
       "import": "./dist/marketing/index.mjs",
       "require": "./dist/marketing/index.cjs"
     },
+    "./annotations": {
+      "types": "./dist/annotations/index.d.ts",
+      "import": "./dist/annotations/index.mjs",
+      "require": "./dist/annotations/index.cjs"
+    },
     "./styles": "./styles/index.css",
     "./styles/index.css": "./styles/index.css",
     "./styles/tokens.css": "./styles/tokens.css",
     "./styles/reset.css": "./styles/reset.css",
     "./styles/components.css": "./styles/components.css",
     "./styles/preset.css": "./styles/preset.css",
+    "./styles/annotations.css": "./styles/annotations.css",
     "./logo.png": "./assets/logo.png",
     "./package.json": "./package.json"
   },
@@ -68,10 +74,10 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.15",
+    "@biomejs/biome": "^2.5.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "next": "^16.2.6",
+    "next": "^16.2.10",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "tsup": "^8.3.0",

package/styles/annotations.css

@@ -0,0 +1,124 @@
+/* @flopay/ui — hand-drawn annotation layer.
+ *
+ * Marker-style notes and arrows drawn over a UI, for guided demos and product
+ * tours. Opt-in, since the arrow geometry is a few KB that most pages don't
+ * need:
+ *
+ *   @import "@flopay/ui/styles/annotations.css";
+ *
+ * Backs the components exported from `@flopay/ui/annotations`, and depends on
+ * tokens.css custom properties. */
+
+:root {
+  /* Brand blue by default, in a handwriting face, so notes read as marker over
+     the UI rather than as part of it. Override either per app. */
+  --annotation-ink: var(--brand);
+  --annotation-font: 'Bradley Hand', 'Segoe Print', 'Chalkboard SE', 'Comic Sans MS', cursive;
+}
+
+.annotation-stage {
+  width: 100%;
+}
+
+/* The positioning context for `pos`. Notes overhang it into the outer stage. */
+.annotation-stage-inner {
+  position: relative;
+}
+
+/* ── Narrow: the notes as a plain list under the content ── */
+.annotation-layer {
+  display: none;
+}
+
+.annotation-list {
+  max-width: 420px;
+  margin: 18px auto 0;
+  padding-top: 14px;
+  border-top: 1px dashed var(--border-hover);
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  font-family: var(--annotation-font);
+  font-size: 16px;
+  line-height: 1.45;
+  color: var(--annotation-ink);
+}
+
+.annotation-list li::before {
+  content: '→ ';
+  opacity: 0.7;
+}
+
+/* ── Wide: notes float around the content ──
+   Notes overhang the stage into the surrounding margins, so what matters is
+   the room *around* the content — which belongs to an ancestor the package
+   doesn't own. A container query on the stage would measure the content box
+   instead and never match. Hence a viewport query.
+   1120px is where a ~720px content box has room for 200px notes either side.
+   An app in a constrained layout (a sidebar, a split view) should re-declare
+   this one block at its own breakpoint; a custom property can't be used in a
+   media condition. */
+@media (min-width: 1120px) {
+  .annotation-layer {
+    display: block;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    /* Above the content so an arrow tip can cross onto its target rather than
+       stopping at the edge. */
+    z-index: 2;
+  }
+
+  .annotation-list {
+    display: none;
+  }
+
+  .annotation {
+    position: absolute;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    transform: rotate(var(--annotation-tilt, 0deg));
+    font-family: var(--annotation-font);
+    font-size: 18px;
+    line-height: 1.3;
+    color: var(--annotation-ink);
+  }
+
+  /* Arrow above the text for upward variants, below it otherwise. */
+  .annotation[data-flip] {
+    flex-direction: column-reverse;
+  }
+
+  /* Text rags toward whatever the arrow points at. */
+  .annotation[data-side='right'] { text-align: right; }
+  .annotation[data-side='left'] { text-align: left; }
+  .annotation[data-side='center'] { text-align: center; }
+
+  /* `position: relative` on both halves is what lets `posText` / `posArrow`
+     nudge one without the other. Offsets shift them off the spot `pos` put
+     them, leaving the flex layout — and therefore each other — undisturbed. */
+  .annotation-text {
+    position: relative;
+  }
+
+  /* `--annotation-arrow-rotate` re-aims the curve and the flips mirror it, so
+     one drawing covers several approach directions without a new curve. Those
+     are visual only — the layout box stays put, which is why a re-aimed arrow
+     overhangs it. Scale sits to the right of rotate so it applies first: you
+     pick the mirrored shape, then aim it. */
+  .annotation-arrow {
+    position: relative;
+    width: calc(160px * var(--annotation-arrow-scale, 1));
+    height: auto;
+    opacity: 0.9;
+    transform: rotate(var(--annotation-arrow-rotate, 0deg))
+      scale(var(--annotation-arrow-flip-x, 1), var(--annotation-arrow-flip-y, 1));
+  }
+
+  .annotation[data-side='right'] .annotation-arrow { align-self: flex-end; }
+  .annotation[data-side='left'] .annotation-arrow { align-self: flex-start; }
+  .annotation[data-side='center'] .annotation-arrow { align-self: center; }
+}

package/styles/components.css

@@ -368,6 +368,12 @@
   .nav-inner {
     padding: 0 16px;
   }
+  /* Collapse the nav to logo + call to action; `Nav` tags every non-CTA
+     item with `nav-link-item`. Apps that don't import this file (they keep
+     their own component CSS) can re-declare just this rule to opt in. */
+  .nav-links .nav-link-item {
+    display: none;
+  }
   .section {
     padding: 80px 16px;
   }