@hubspot/app-connect-sdk 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/browser/{HubSpotAppConnect-BW45gyDs.js → HubSpotAppConnect-DFe9b90e.js}

@@ -75,7 +75,7 @@ var spinner = "ConnectButton_spinner__db1gqc6";
 //#region src/browser/react/components/ConnectButton/ConnectButton.tsx
 function ConnectButton({ variant = "primary", size = "md", className }) {
 	const { status, connectToHubSpot } = useHubSpotAppConnect();
-	const isConnecting = status === "connecting";
+	const isConnecting = status === "connecting" || status === "initializing";
 	return /* @__PURE__ */ jsxs(Button, {
 		variant,
 		size,
@@ -302,6 +302,7 @@ function getFullName(user) {
 }
 function AppConnectHeader({ title }) {
 	const { status } = useHubSpotAppConnect();
+	const connectButton = status === "initializing" ? null : /* @__PURE__ */ jsx(ConnectButton, { variant: "secondary" });
 	return /* @__PURE__ */ jsxs("header", {
 		className: styles$3.header,
 		children: [/* @__PURE__ */ jsx("div", {
@@ -316,7 +317,7 @@ function AppConnectHeader({ title }) {
 					}), /* @__PURE__ */ jsx(ShareButton, { pageTitle: title })]
 				}), status === "connected" ? /* @__PURE__ */ jsx(ViewingHubSpotContextRow, {}) : null]
 			})
-		}), status === "connected" ? /* @__PURE__ */ jsx(UserMenu, {}) : /* @__PURE__ */ jsx(ConnectButton, { variant: "secondary" })]
+		}), status === "connected" ? /* @__PURE__ */ jsx(UserMenu, {}) : connectButton]
 	});
 }
 function ViewingHubSpotContextRow() {
@@ -486,4 +487,4 @@ function HubSpotAppConnectContent({ connected, disconnectedMessage }) {
 //#endregion
 export { useHubSpotAppConnect as n, HubSpotAppConnect as t };
 
-//# sourceMappingURL=HubSpotAppConnect-BW45gyDs.js.map
+//# sourceMappingURL=HubSpotAppConnect-DFe9b90e.js.map

package/dist/browser/HubSpotAppConnect-DFe9b90e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HubSpotAppConnect-DFe9b90e.js","names":["styles.root","styles.variant","variant","styles.size","size","styles","styles","styles","styles"],"sources":["../../src/browser/react/context.ts","../../src/browser/react/hooks.ts","../../src/browser/react/components/Button/Button.css.ts","../../src/browser/react/components/Button/Button.tsx","../../src/browser/react/components/ConnectButton/ConnectButton.css.ts","../../src/browser/react/components/ConnectButton/ConnectButton.tsx","../../src/browser/react/components/icons/ChevronDownIcon.tsx","../../src/browser/react/components/icons/ExternalLinkIcon.tsx","../../src/browser/react/components/icons/HubSpotDataSourceIcon.tsx","../../src/browser/react/components/icons/LogoutIcon.tsx","../../src/browser/react/components/icons/ShareIcon.tsx","../../src/browser/react/components/ShareButton/ShareButton.css.ts","../../src/browser/react/components/ShareButton/ShareButton.tsx","../../src/browser/react/components/AppConnectHeader/AppConnectHeader.css.ts","../../src/browser/react/components/AppConnectHeader/AppConnectHeader.tsx","../../src/browser/react/components/DisconnectedBody/DisconnectedBody.css.ts","../../src/browser/react/components/DisconnectedBody/DisconnectedBody.tsx","../../src/browser/react/components/LoadingIndicator/LoadingIndicator.css.ts","../../src/browser/react/components/LoadingIndicator/LoadingIndicator.tsx","../../src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.css.ts","../../src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { AppConnectController } from '../types.ts';\n\n/**\n * React context that carries the `AppConnectController` from the\n * `HubSpotAppConnect` provider down to consumers of\n * `useHubSpotAppConnect`. `null` indicates the hook is being used\n * outside a provider.\n */\nexport const HubSpotAppConnectControllerContext =\n  createContext<AppConnectController | null>(null);\n","import { useContext, useSyncExternalStore } from 'react';\n\nimport type { AppConnectState } from '../types.ts';\nimport { HubSpotAppConnectControllerContext } from './context.ts';\n\nexport type UseHubSpotAppConnectResult = AppConnectState;\n\n/**\n * React hook that returns the current `AppConnectState`. Must be\n * called inside a {@link HubSpotAppConnect} provider — throws when\n * no controller is available.\n *\n * The hook subscribes to the controller via `useSyncExternalStore`\n * so React 18+ batched updates and SSR work correctly.\n */\nexport function useHubSpotAppConnect(): UseHubSpotAppConnectResult {\n  const controller = useContext(HubSpotAppConnectControllerContext);\n  if (controller == null) {\n    throw new Error(\n      'useHubSpotAppConnect must be used within HubSpotAppConnect'\n    );\n  }\n  return useSyncExternalStore(\n    controller.subscribe,\n    controller.getSnapshot,\n    controller.getServerSnapshot\n  );\n}\n","import { style, styleVariants } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nexport const root = style({\n  appearance: 'none',\n  WebkitAppearance: 'none',\n  margin: 0,\n  font: 'inherit',\n  fontWeight: 500,\n  lineHeight: 'inherit',\n  textAlign: 'center',\n  cursor: 'pointer',\n  borderWidth: 1,\n  borderStyle: 'solid',\n  borderRadius: themeVars.borderRadius[100],\n  transition:\n    'background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease',\n  selectors: {\n    '&:disabled': {\n      cursor: 'wait',\n      opacity: 0.55,\n    },\n  },\n});\n\nexport const variant = styleVariants({\n  primary: {\n    backgroundColor: themeVars.fill.primary.default,\n    color: themeVars.text.primary.default,\n    borderColor: themeVars.border.primary.default,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        filter: 'brightness(0.95)',\n      },\n    },\n  },\n  secondary: {\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n    borderColor: themeVars.border.core.default,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: '#f7f7f7',\n      },\n    },\n  },\n});\n\nexport const size = styleVariants({\n  md: {\n    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,\n    fontSize: 14,\n  },\n  lg: {\n    padding: `${themeVars.space[300]} ${themeVars.space[500]}`,\n    fontSize: 16,\n  },\n});\n","import type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport * as styles from './Button.css.ts';\n\nexport type ButtonVariant = 'primary' | 'secondary';\nexport type ButtonSize = 'md' | 'lg';\n\nexport interface ButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  children: ReactNode;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nexport function Button({\n  children,\n  className,\n  variant = 'primary',\n  size = 'md',\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const composedClassName = [\n    styles.root,\n    styles.variant[variant],\n    styles.size[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <button {...rest} type={type} className={composedClassName}>\n      {children}\n    </button>\n  );\n}\n","import { keyframes, style, styleVariants } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst spin = keyframes({\n  from: { transform: 'rotate(0deg)' },\n  to: { transform: 'rotate(360deg)' },\n});\n\nexport const root = style({\n  position: 'relative',\n});\n\nexport const label = style({\n  position: 'relative',\n  zIndex: 0,\n});\n\nexport const labelMuted = style({\n  opacity: 0.22,\n});\n\nexport const loadingBackdrop = styleVariants({\n  primary: {\n    position: 'absolute',\n    left: '50%',\n    top: '50%',\n    zIndex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 36,\n    height: 36,\n    marginLeft: -18,\n    marginTop: -18,\n    borderRadius: '50%',\n    backgroundColor: 'rgba(255, 255, 255, 0.88)',\n    boxShadow: '0 1px 6px rgba(0, 0, 0, 0.14)',\n    pointerEvents: 'none',\n  },\n  secondary: {\n    position: 'absolute',\n    left: '50%',\n    top: '50%',\n    zIndex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 36,\n    height: 36,\n    marginLeft: -18,\n    marginTop: -18,\n    borderRadius: '50%',\n    backgroundColor: 'rgba(255, 255, 255, 0.82)',\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.subtle.default,\n    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.08)',\n    pointerEvents: 'none',\n  },\n});\n\nexport const spinner = style({\n  display: 'block',\n  width: 14,\n  height: 14,\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: themeVars.border.core.subtle.default,\n  borderTopColor: themeVars.fill.primary.default,\n  borderRadius: '50%',\n  animation: `${spin} 0.8s linear infinite`,\n});\n","import { useHubSpotAppConnect } from '../../hooks.ts';\nimport type { ButtonProps } from '../Button/Button.tsx';\nimport { Button } from '../Button/Button.tsx';\nimport {\n  label,\n  labelMuted,\n  loadingBackdrop,\n  root,\n  spinner,\n} from './ConnectButton.css.ts';\n\nexport interface ConnectButtonProps extends Pick<\n  ButtonProps,\n  'variant' | 'size' | 'className'\n> {}\n\nexport function ConnectButton({\n  variant = 'primary',\n  size = 'md',\n  className,\n}: ConnectButtonProps) {\n  const { status, connectToHubSpot } = useHubSpotAppConnect();\n  const isConnecting = status === 'connecting' || status === 'initializing';\n  const composedClassName = [root, className].filter(Boolean).join(' ');\n  const labelClassName = isConnecting ? `${label} ${labelMuted}` : label;\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      className={composedClassName}\n      aria-busy={isConnecting}\n      onClick={() => void connectToHubSpot()}\n      disabled={isConnecting}\n    >\n      <span className={labelClassName}>Connect to HubSpot</span>\n      {isConnecting ? (\n        <span className={loadingBackdrop[variant]} aria-hidden=\"true\">\n          <span className={spinner} />\n        </span>\n      ) : null}\n    </Button>\n  );\n}\n","export interface ChevronDownIconProps {\n  className?: string;\n}\n\nexport function ChevronDownIcon({ className }: ChevronDownIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 6l4 4 4-4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface ExternalLinkIconProps {\n  className?: string;\n}\n\nexport function ExternalLinkIcon({ className }: ExternalLinkIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6.5 3.5H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2.5M10 2.5h3.5V6M9 7l5-5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface HubSpotDataSourceIconProps {\n  className?: string;\n}\n\nexport function HubSpotDataSourceIcon({\n  className,\n}: HubSpotDataSourceIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <rect\n        x=\"2.5\"\n        y=\"2.5\"\n        width=\"11\"\n        height=\"11\"\n        rx=\"1.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n      />\n      <path\n        d=\"M5 6h6M5 8.25h6M5 10.5h4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface LogoutIconProps {\n  className?: string;\n}\n\nexport function LogoutIcon({ className }: LogoutIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6.5 2.5h-3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M10.5 11l3-3-3-3\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M13.5 8h-7\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n","export interface ShareIconProps {\n  className?: string;\n}\n\nexport function ShareIcon({ className }: ShareIconProps) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"18\" cy=\"5\" r=\"2.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <circle cx=\"6\" cy=\"12\" r=\"2.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <circle\n        cx=\"18\"\n        cy=\"19\"\n        r=\"2.75\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n      />\n      <path\n        d=\"M8.6 10.5L15.4 6.5M8.6 13.5L15.4 17.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst shareBorder = '#cbd6e2';\nconst shareText = '#33475b';\n\nexport const styles = {\n  shareButton: style({\n    flexShrink: 0,\n    appearance: 'none',\n    WebkitAppearance: 'none',\n    margin: 0,\n    fontFamily: 'inherit',\n    fontSize: 14,\n    fontWeight: 500,\n    lineHeight: 1,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: themeVars.space[200],\n    padding: `8px ${themeVars.space[300]}`,\n    color: shareText,\n    backgroundColor: themeVars.fill.surface.default.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: shareBorder,\n    borderRadius: 100,\n    transition:\n      'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: '#f5f8fa',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${themeVars.border.tertiary.default}`,\n        outlineOffset: 2,\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.55,\n      },\n    },\n  }),\n  shareIcon: style({\n    width: 16,\n    height: 16,\n    flexShrink: 0,\n    display: 'block',\n  }),\n} as const;\n","import { ShareIcon } from '../icons/ShareIcon.tsx';\nimport { styles } from './ShareButton.css.ts';\n\ninterface ShareAppConnectPageOptions {\n  pageTitle: string;\n}\n\nasync function shareAppConnectPage(\n  options: ShareAppConnectPageOptions\n): Promise<void> {\n  const { pageTitle } = options;\n  const url = window.location.href;\n  if (typeof navigator.share === 'function') {\n    try {\n      await navigator.share({ title: pageTitle, text: pageTitle, url });\n      return;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === 'AbortError') {\n        return;\n      }\n    }\n  }\n  if (typeof navigator.clipboard?.writeText === 'function') {\n    await navigator.clipboard.writeText(url);\n  }\n}\n\nexport interface ShareButtonProps {\n  pageTitle: string;\n}\n\nexport function ShareButton({ pageTitle }: ShareButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={styles.shareButton}\n      onClick={() => void shareAppConnectPage({ pageTitle })}\n    >\n      <ShareIcon className={styles.shareIcon} />\n      <span>Share</span>\n    </button>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst avatarOrange = themeVars.fill.brand.default;\nconst avatarTextColor = themeVars.text.primary.default;\n\nexport const styles = {\n  header: style({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: themeVars.space[300],\n    paddingBottom: themeVars.space[300],\n    borderBottomWidth: 1,\n    borderBottomStyle: 'solid',\n    borderBottomColor: themeVars.border.core.subtle.default,\n  }),\n  titleRow: style({\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n  }),\n  leftStack: style({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    gap: themeVars.space[200],\n    minWidth: 0,\n    flex: 1,\n  }),\n  contextRow: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    fontSize: 14,\n    lineHeight: 1.35,\n    color: themeVars.text.core.subtle,\n    minWidth: 0,\n  }),\n  contextIcon: style({\n    width: 16,\n    height: 16,\n    flexShrink: 0,\n    color: themeVars.text.core.subtle,\n  }),\n  contextPrefix: style({\n    flexShrink: 0,\n  }),\n  contextLink: style({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 4,\n    color: themeVars.fill.brand.default,\n    textDecoration: 'none',\n    fontWeight: 500,\n    selectors: {\n      '&:hover': {\n        textDecoration: 'underline',\n      },\n    },\n  }),\n  contextExternalIcon: style({\n    width: 14,\n    height: 14,\n    flexShrink: 0,\n  }),\n  titleCluster: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: themeVars.space[200],\n    width: 'max-content',\n    maxWidth: '100%',\n    minWidth: 0,\n  }),\n  title: style({\n    flex: '0 1 auto',\n    fontSize: 20,\n    fontWeight: 600,\n    margin: 0,\n    color: themeVars.text.core.default,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  userTrigger: style({\n    appearance: 'none',\n    WebkitAppearance: 'none',\n    margin: 0,\n    font: 'inherit',\n    lineHeight: 1,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: themeVars.space[200],\n    padding: `6px ${themeVars.space[300]} 6px 6px`,\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.default,\n    borderRadius: 999,\n    transition: 'background-color 120ms ease, border-color 120ms ease',\n    selectors: {\n      '&:hover': {\n        backgroundColor: '#f7f7f7',\n      },\n      '&[data-popup-open]': {\n        backgroundColor: '#f7f7f7',\n      },\n    },\n  }),\n  triggerName: style({\n    fontWeight: 500,\n    fontSize: 14,\n  }),\n  chevron: style({\n    width: 14,\n    height: 14,\n    color: themeVars.text.core.subtle,\n    transition: 'transform 150ms ease',\n    selectors: {\n      '[data-popup-open] &': {\n        transform: 'rotate(180deg)',\n      },\n    },\n  }),\n  avatar: style({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: avatarOrange,\n    color: avatarTextColor,\n    fontWeight: 600,\n    flexShrink: 0,\n    borderRadius: '50%',\n    userSelect: 'none',\n  }),\n  avatarSm: style({\n    width: 28,\n    height: 28,\n    fontSize: 11,\n  }),\n  avatarLg: style({\n    width: 40,\n    height: 40,\n    fontSize: 14,\n  }),\n  popup: style({\n    minWidth: 240,\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.subtle.default,\n    borderRadius: themeVars.borderRadius[300],\n    boxShadow:\n      '0 6px 16px rgba(17, 17, 17, 0.08), 0 2px 6px rgba(17, 17, 17, 0.04)',\n    padding: `${themeVars.space[200]} 0`,\n    outline: 'none',\n    transformOrigin: 'top right',\n    opacity: 0,\n    transform: 'scale(0.96)',\n    transition: 'opacity 120ms ease, transform 120ms ease',\n    selectors: {\n      '&[data-starting-style]': {\n        opacity: 0,\n        transform: 'scale(0.96)',\n      },\n      '&[data-open]': {\n        opacity: 1,\n        transform: 'scale(1)',\n      },\n    },\n  }),\n  userInfo: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: themeVars.space[300],\n    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,\n  }),\n  userInfoText: style({\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n  }),\n  userInfoName: style({\n    fontWeight: 600,\n    fontSize: 14,\n    color: themeVars.text.core.default,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n  userInfoEmail: style({\n    fontSize: 13,\n    color: themeVars.text.core.subtle,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n  separator: style({\n    height: 1,\n    margin: `${themeVars.space[200]} 0`,\n    backgroundColor: themeVars.border.core.subtle.default,\n    border: 'none',\n  }),\n  disconnectItem: style({\n    display: 'flex',\n    alignItems: 'center',\n    gap: themeVars.space[200],\n    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,\n    color: themeVars.text.alert.default,\n    fontSize: 14,\n    fontWeight: 500,\n    cursor: 'pointer',\n    outline: 'none',\n    userSelect: 'none',\n    selectors: {\n      '&[data-highlighted]': {\n        backgroundColor: themeVars.fill.accent.red.subtle.default,\n      },\n    },\n  }),\n  disconnectIcon: style({\n    width: 16,\n    height: 16,\n  }),\n} as const;\n","import { Menu } from '@base-ui/react/menu';\n\nimport { useHubSpotAppConnect } from '../../hooks.ts';\nimport { ConnectButton } from '../ConnectButton/ConnectButton.tsx';\nimport { ChevronDownIcon } from '../icons/ChevronDownIcon.tsx';\nimport { ExternalLinkIcon } from '../icons/ExternalLinkIcon.tsx';\nimport { HubSpotDataSourceIcon } from '../icons/HubSpotDataSourceIcon.tsx';\nimport { LogoutIcon } from '../icons/LogoutIcon.tsx';\nimport { ShareButton } from '../ShareButton/ShareButton.tsx';\nimport { styles } from './AppConnectHeader.css.ts';\n\ninterface FakeUser {\n  firstName: string;\n  lastName: string;\n  email: string;\n}\n\nconst FAKE_USER: FakeUser = {\n  firstName: 'Gabby',\n  lastName: 'Martinez',\n  email: 'gabby.martinez@acmecorp.com',\n};\n\nfunction getUserInitials(user: FakeUser): string {\n  const first = user.firstName.charAt(0).toUpperCase();\n  const last = user.lastName.charAt(0).toUpperCase();\n  return `${first}${last}`;\n}\n\nfunction getFullName(user: FakeUser): string {\n  return `${user.firstName} ${user.lastName}`;\n}\n\ninterface AppConnectHeaderProps {\n  title: string;\n}\n\nexport function AppConnectHeader({ title }: AppConnectHeaderProps) {\n  const { status } = useHubSpotAppConnect();\n  const connectButton =\n    status === 'initializing' ? null : <ConnectButton variant=\"secondary\" />;\n  return (\n    <header className={styles.header}>\n      <div className={styles.titleRow}>\n        <div className={styles.leftStack}>\n          <div className={styles.titleCluster}>\n            <h1 className={styles.title}>{title}</h1>\n            <ShareButton pageTitle={title} />\n          </div>\n          {status === 'connected' ? <ViewingHubSpotContextRow /> : null}\n        </div>\n      </div>\n      {status === 'connected' ? <UserMenu /> : connectButton}\n    </header>\n  );\n}\n\nfunction ViewingHubSpotContextRow() {\n  return (\n    <div className={styles.contextRow}>\n      <HubSpotDataSourceIcon className={styles.contextIcon} />\n      <span className={styles.contextPrefix}>Viewing HubSpot data from </span>\n      <a\n        className={styles.contextLink}\n        href=\"#\"\n        onClick={(event) => {\n          event.preventDefault();\n        }}\n      >\n        Acme Corp · HubSpot\n        <ExternalLinkIcon className={styles.contextExternalIcon} />\n      </a>\n    </div>\n  );\n}\n\nfunction UserMenu() {\n  const { disconnectFromHubSpot } = useHubSpotAppConnect();\n  const initials = getUserInitials(FAKE_USER);\n  const fullName = getFullName(FAKE_USER);\n\n  return (\n    <Menu.Root modal={false}>\n      <Menu.Trigger className={styles.userTrigger}>\n        <span\n          className={`${styles.avatar} ${styles.avatarSm}`}\n          aria-hidden=\"true\"\n        >\n          {initials}\n        </span>\n        <span className={styles.triggerName}>{fullName}</span>\n        <ChevronDownIcon className={styles.chevron} />\n      </Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner sideOffset={8} align=\"end\">\n          <Menu.Popup className={styles.popup}>\n            <div className={styles.userInfo}>\n              <span\n                className={`${styles.avatar} ${styles.avatarLg}`}\n                aria-hidden=\"true\"\n              >\n                {initials}\n              </span>\n              <div className={styles.userInfoText}>\n                <span className={styles.userInfoName}>{fullName}</span>\n                <span className={styles.userInfoEmail}>{FAKE_USER.email}</span>\n              </div>\n            </div>\n            <Menu.Separator className={styles.separator} />\n            <Menu.Item\n              className={styles.disconnectItem}\n              onClick={() => void disconnectFromHubSpot()}\n            >\n              <LogoutIcon className={styles.disconnectIcon} />\n              Disconnect\n            </Menu.Item>\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nexport const styles = {\n  card: style({\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.default,\n    borderRadius: themeVars.borderRadius[400],\n    padding: themeVars.space[500],\n    textAlign: 'center',\n    backgroundColor: themeVars.fill.surface.default.default,\n    color: themeVars.text.core.default,\n  }),\n  message: style({\n    marginTop: 0,\n    marginBottom: themeVars.space[400],\n  }),\n  errorText: style({\n    marginTop: themeVars.space[300],\n    marginBottom: 0,\n    color: themeVars.text.alert.default,\n  }),\n} as const;\n","import type { ReactNode } from 'react';\n\nimport { useHubSpotAppConnect } from '../../hooks.ts';\nimport { ConnectButton } from '../ConnectButton/ConnectButton.tsx';\nimport { styles } from './DisconnectedBody.css.ts';\n\ninterface DisconnectedBodyProps {\n  message: ReactNode;\n}\n\nexport function DisconnectedBody({ message }: DisconnectedBodyProps) {\n  const { error } = useHubSpotAppConnect();\n\n  return (\n    <div className={styles.card}>\n      <p className={styles.message}>{message}</p>\n      <ConnectButton size=\"lg\" />\n      {error && (\n        <p className={styles.errorText}>\n          Failed to connect to HubSpot. {error}\n        </p>\n      )}\n    </div>\n  );\n}\n","import { keyframes, style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nconst spin = keyframes({\n  from: { transform: 'rotate(0deg)' },\n  to: { transform: 'rotate(360deg)' },\n});\n\nexport const styles = {\n  wrapper: style({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 200,\n    padding: themeVars.space[600],\n  }),\n  spinner: style({\n    width: 40,\n    height: 40,\n    borderWidth: 3,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.core.subtle.default,\n    borderTopColor: themeVars.fill.primary.default,\n    borderRadius: '50%',\n    animation: `${spin} 0.8s linear infinite`,\n  }),\n} as const;\n","import { styles } from './LoadingIndicator.css.ts';\n\nexport function LoadingIndicator() {\n  return (\n    <div className={styles.wrapper} role=\"status\" aria-label=\"Loading\">\n      <div className={styles.spinner} />\n    </div>\n  );\n}\n","import { style } from '@vanilla-extract/css';\n\nimport { themeVars } from '../../../theme.css.ts';\n\nexport const styles = {\n  shell: style({\n    width: '100%',\n    padding: `${themeVars.space[400]} ${themeVars.space[500]}`,\n  }),\n  content: style({\n    marginTop: themeVars.space[500],\n  }),\n  connectedErrorBanner: style({\n    backgroundColor: themeVars.fill.alert.subtle,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderColor: themeVars.border.alert.default,\n    borderRadius: themeVars.borderRadius[300],\n    padding: themeVars.space[300],\n    marginBottom: themeVars.space[300],\n    color: themeVars.text.alert.default,\n  }),\n} as const;\n","import { useEffect, type ReactNode } from 'react';\n\nimport { themeClass } from '../../../theme.css.ts';\nimport type { AppConnectController } from '../../../types.ts';\nimport { HubSpotAppConnectControllerContext } from '../../context.ts';\nimport { useHubSpotAppConnect } from '../../hooks.ts';\nimport { AppConnectHeader } from '../AppConnectHeader/AppConnectHeader.tsx';\nimport { DisconnectedBody } from '../DisconnectedBody/DisconnectedBody.tsx';\nimport { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.tsx';\nimport { styles } from './HubSpotAppConnect.css.ts';\n\n/**\n * Props accepted by {@link HubSpotAppConnect}.\n */\nexport interface HubSpotAppConnectProps {\n  /** Title text rendered in the standard SDK header. */\n  title: string;\n  /** Controller produced by `createAppConnectController`. */\n  controller: AppConnectController;\n  /** Content rendered when the controller is in the `connected` state. */\n  connected: ReactNode;\n  /**\n   * Description text rendered inside the SDK-owned disconnected card,\n   * above the primary \"Connect to HubSpot\" button.\n   */\n  disconnectedMessage: ReactNode;\n}\n\n/**\n * Layout component that exposes `controller` to {@link useHubSpotAppConnect},\n * starts it once on mount, and renders a standard header plus the content\n * slot that matches the current connection status.\n */\nexport function HubSpotAppConnect({\n  title,\n  controller,\n  connected,\n  disconnectedMessage,\n}: HubSpotAppConnectProps) {\n  useEffect(() => {\n    controller.start();\n  }, [controller]);\n  useEffect(() => {\n    document.documentElement.classList.add(themeClass);\n    return () => {\n      document.documentElement.classList.remove(themeClass);\n    };\n  }, []);\n  return (\n    <HubSpotAppConnectControllerContext.Provider value={controller}>\n      <div className={styles.shell}>\n        <AppConnectHeader title={title} />\n        <div className={styles.content}>\n          <HubSpotAppConnectContent\n            connected={connected}\n            disconnectedMessage={disconnectedMessage}\n          />\n        </div>\n      </div>\n    </HubSpotAppConnectControllerContext.Provider>\n  );\n}\n\ninterface HubSpotAppConnectContentProps {\n  connected: ReactNode;\n  disconnectedMessage: ReactNode;\n}\n\nfunction HubSpotAppConnectContent({\n  connected,\n  disconnectedMessage,\n}: HubSpotAppConnectContentProps) {\n  const { status, error } = useHubSpotAppConnect();\n  if (status === 'initializing') {\n    return <LoadingIndicator />;\n  }\n  if (status === 'connected') {\n    return (\n      <>\n        {error ? (\n          <div className={styles.connectedErrorBanner} role=\"alert\">\n            {error}\n          </div>\n        ) : null}\n        {connected}\n      </>\n    );\n  }\n  return <DisconnectedBody message={disconnectedMessage} />;\n}\n"],"mappings":"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"}

package/dist/browser/{create-vctOhpX9.js → create-BNQazCF-.js}

@@ -35,77 +35,23 @@ const noopLogger = {
 	warn: () => {},
 	error: () => {}
 };
-//#endregion
-//#region src/browser/app-connect-controller/utils/timeout-utils.ts
-function delay(ms) {
-	if (ms <= 0) return Promise.resolve();
-	return new Promise((resolve) => {
-		setTimeout(resolve, ms);
-	});
-}
-//#endregion
-//#region src/browser/app-connect-controller/connect-start.ts
-/** Extra wait before redirect so the connect progress UI is visible; set to `0` to disable. */
-const ARTIFICIAL_CONNECT_REDIRECT_DELAY_MS = 500;
 /**
-* Begins the OAuth connect flow:
-*
-* 1. Calls the SDK's `auth/init-session` route to mint a fresh PKCE
-*    verifier + state and obtain HubSpot's `authorize` URL.
-* 2. Navigates the browser to that URL (full-page redirect).
-*
-* The `return_path` is the current path + query so the user lands
-* back where they started after authorizing.
-*
-* Throws when the init call fails. Does not return after the redirect
-* begins because the page is unloaded.
+* Query parameter on the `auth/complete` POST request carrying the
+* authorization `code` HubSpot returned to the frontend callback.
 */
-async function startHubSpotConnection(context) {
-	const { config } = context;
-	const returnPath = `${window.location.pathname}${window.location.search}`;
-	const initUrl = new URL(`${config.hubSpotConnectBaseUrl}/auth/init-session`, window.location.origin);
-	initUrl.searchParams.set("return_path", returnPath);
-	const initResponse = await fetch(initUrl.toString(), { credentials: "include" });
-	if (!initResponse.ok) throw new Error(`Failed to init session: ${initResponse.status}`);
-	const { authorization_url: authorizationUrl } = await initResponse.json();
-	await delay(ARTIFICIAL_CONNECT_REDIRECT_DELAY_MS);
-	window.location.href = authorizationUrl;
-}
-//#endregion
-//#region src/browser/app-connect-controller/default-session-storage.ts
+const AUTH_COMPLETE_CODE_PARAM = "code";
 /**
-* Builds a `SessionStorage` adapter that delegates to the global
-* `sessionStorage` object exposed by browsers. The controller uses
-* this when no custom storage is supplied (e.g. for tests or non-DOM
-* environments).
+* Query parameter on the `auth/complete` POST request carrying the
+* OAuth `state` HubSpot echoed back to the frontend callback.
 */
-function createDefaultSessionStorage() {
-	return {
-		setItem: (key, value) => {
-			sessionStorage.setItem(key, value);
-		},
-		getItem: (key) => {
-			return sessionStorage.getItem(key);
-		},
-		removeItem: (key) => {
-			sessionStorage.removeItem(key);
-		}
-	};
-}
-//#endregion
-//#region src/shared/constants.ts
+const AUTH_COMPLETE_STATE_PARAM = "state";
 /**
-* Constants whose values are part of the contract between the browser
-* controller and the server-side hubspot-connect routes. Both halves
-* import from this module so the wire format stays in sync.
+* `postMessage` `data.type` value the OAuth popup sends to its opener
+* with the authorization `code` and `state` from the callback URL. The
+* opener POSTs them to `auth/complete` so credentialed cookies stay in
+* the same CHIPS partition as `auth/init-session`.
 */
-/**
-* Query parameter on the OAuth return URL that carries the new access
-* token's expiry (Unix epoch milliseconds). The server emits this on
-* the `auth/callback` redirect; the browser parses it during `initSdk`
-* and then strips it from the URL via `history.replaceState`.
-*/
-const EXPIRES_AT_URL_PARAM = "__hs_expires_at";
+const OAUTH_POPUP_CALLBACK_MESSAGE_TYPE = "hubspot-app-connect:oauth-callback";
 //#endregion
 //#region src/browser/app-connect-controller/constants.ts
 /**
@@ -167,6 +113,232 @@ function isClientSessionActive(context) {
 	return expiresAt !== null && Date.now() < expiresAt;
 }
 //#endregion
+//#region src/browser/app-connect-controller/oauth-complete.ts
+/**
+* Finishes the OAuth token exchange by POSTing `code` and `state` to the
+* SDK's `auth/complete` route with credentialed cookies from the current
+* browsing context (must match the partition used by `auth/init-session`).
+*/
+async function completeHubSpotOAuthSession(context, options) {
+	const { code, state } = options;
+	const completeUrl = new URL(`${context.config.hubSpotConnectBaseUrl}/auth/complete`, window.location.origin);
+	completeUrl.searchParams.set(AUTH_COMPLETE_CODE_PARAM, code);
+	completeUrl.searchParams.set(AUTH_COMPLETE_STATE_PARAM, state);
+	let response;
+	try {
+		response = await fetch(completeUrl.toString(), {
+			method: "POST",
+			credentials: "include"
+		});
+	} catch (err) {
+		clearSessionStorage(context);
+		throw new Error(`Failed to complete HubSpot OAuth: ${err instanceof Error ? err.message : String(err)}`);
+	}
+	if (!response.ok) {
+		clearSessionStorage(context);
+		throw new Error(`Failed to complete HubSpot OAuth: ${response.status} ${response.statusText}`);
+	}
+	return await response.json();
+}
+//#endregion
+//#region src/browser/app-connect-controller/oauth-popup.ts
+const OAUTH_POPUP_WINDOW_NAME = "hubspot-app-connect-oauth";
+const OAUTH_POPUP_POLL_INTERVAL_MS = 300;
+function isOAuthPopupCallbackMessage(data) {
+	if (typeof data !== "object" || data === null) return false;
+	const record = data;
+	return record.type === "hubspot-app-connect:oauth-callback" && typeof record.code === "string" && record.code.length > 0 && typeof record.state === "string" && record.state.length > 0;
+}
+/**
+* Opens HubSpot's authorize URL in a popup and waits for the callback
+* page to relay `code` + `state` back. The opener POSTs to
+* `auth/complete` so credentialed cookies use the same CHIPS partition
+* as `auth/init-session`.
+*/
+async function waitForHubSpotOAuthPopup(options) {
+	const { context, authorizationUrl } = options;
+	const targetOrigin = window.location.origin;
+	return new Promise((resolve, reject) => {
+		let popup = null;
+		let pollTimer;
+		let isSettled = false;
+		let isCallbackReceived = false;
+		const cleanup = () => {
+			window.removeEventListener("message", onMessage);
+			if (pollTimer !== void 0) clearInterval(pollTimer);
+		};
+		const settleSuccess = (expiresAtMs) => {
+			if (isSettled) return;
+			isSettled = true;
+			cleanup();
+			storeExpiresAt({
+				context,
+				expiresAtMs
+			});
+			context.store.setState({
+				isSessionConnected: true,
+				error: null
+			});
+			resolve();
+		};
+		const settleFailure = (message) => {
+			if (isSettled) return;
+			isSettled = true;
+			cleanup();
+			try {
+				popup?.close();
+			} catch {}
+			reject(new Error(message));
+		};
+		const onMessage = (event) => {
+			if (event.origin !== targetOrigin) return;
+			if (!isOAuthPopupCallbackMessage(event.data)) return;
+			if (isCallbackReceived) return;
+			isCallbackReceived = true;
+			(async () => {
+				try {
+					settleSuccess((await completeHubSpotOAuthSession(context, {
+						code: event.data.code,
+						state: event.data.state
+					})).expires_at);
+				} catch (err) {
+					settleFailure(err instanceof Error ? err.message : "HubSpot OAuth failed");
+				}
+			})();
+		};
+		window.addEventListener("message", onMessage);
+		popup = window.open(authorizationUrl, OAUTH_POPUP_WINDOW_NAME, "popup=yes,width=600,height=700");
+		if (!popup) {
+			settleFailure("Popup blocked. Allow popups for this site and try again.");
+			return;
+		}
+		pollTimer = setInterval(() => {
+			if (popup?.closed && !isCallbackReceived) settleFailure("Connect to HubSpot was cancelled.");
+		}, OAUTH_POPUP_POLL_INTERVAL_MS);
+	});
+}
+/**
+* Called from the OAuth callback page inside the popup. Relays `code`
+* and `state` to the opener (which runs `auth/complete`) and closes.
+*/
+function relayOAuthCallbackToOpener(options) {
+	const { code, state } = options;
+	const opener = window.opener;
+	if (!opener || opener.closed) return false;
+	const message = {
+		type: OAUTH_POPUP_CALLBACK_MESSAGE_TYPE,
+		code,
+		state
+	};
+	opener.postMessage(message, window.location.origin);
+	try {
+		window.close();
+	} catch {}
+	return true;
+}
+function hasOAuthPopupOpener() {
+	try {
+		return Boolean(window.opener && !window.opener.closed);
+	} catch {
+		return false;
+	}
+}
+function isOAuthPopupCallback() {
+	return window.name === "hubspot-app-connect-oauth" && hasOAuthPopupOpener();
+}
+//#endregion
+//#region src/browser/app-connect-controller/utils/iframe-utils.ts
+/**
+* Returns `true` when the app runs inside a parent frame (same-origin
+* or cross-origin). Cross-origin parent access throws; treat that as
+* embedded so OAuth uses a popup instead of a top-level redirect.
+*/
+function isAppEmbeddedInIframe() {
+	try {
+		return window.self !== window.top;
+	} catch {
+		return true;
+	}
+}
+//#endregion
+//#region src/browser/app-connect-controller/utils/resolve-oauth-connect-mode.ts
+/**
+* Maps the configured {@link OAuthConnectMode} to the concrete connect
+* behavior for the current browsing context.
+*/
+function resolveOAuthConnectMode(options) {
+	const mode = options.oauthConnectMode ?? "auto";
+	if (mode === "popup") return "popup";
+	if (mode === "redirect") return "redirect";
+	return isAppEmbeddedInIframe() ? "popup" : "redirect";
+}
+//#endregion
+//#region src/browser/app-connect-controller/utils/timeout-utils.ts
+function delay(ms) {
+	if (ms <= 0) return Promise.resolve();
+	return new Promise((resolve) => {
+		setTimeout(resolve, ms);
+	});
+}
+//#endregion
+//#region src/browser/app-connect-controller/connect-start.ts
+/** Extra wait before redirect so the connect progress UI is visible; set to `0` to disable. */
+const ARTIFICIAL_CONNECT_REDIRECT_DELAY_MS = 500;
+/**
+* Begins the OAuth connect flow:
+*
+* 1. Calls the SDK's `auth/init-session` route to mint a fresh PKCE
+*    verifier + state and obtain HubSpot's `authorize` URL.
+* 2. Navigates to that URL via full-page redirect, or opens it in a
+*    popup when embedded in an iframe or when `oauthConnectMode` is
+*    `'popup'`.
+*
+* The `return_path` is the current path + query so the user lands
+* back where they started after authorizing (redirect mode only).
+*
+* Throws when the init call fails. Does not return after a redirect
+* begins because the page is unloaded.
+*/
+async function startHubSpotConnection(context) {
+	const { config } = context;
+	const returnPath = `${window.location.pathname}${window.location.search}`;
+	const initUrl = new URL(`${config.hubSpotConnectBaseUrl}/auth/init-session`, window.location.origin);
+	initUrl.searchParams.set("return_path", returnPath);
+	const initResponse = await fetch(initUrl.toString(), { credentials: "include" });
+	if (!initResponse.ok) throw new Error(`Failed to init session: ${initResponse.status}`);
+	const { authorization_url: authorizationUrl } = await initResponse.json();
+	await delay(ARTIFICIAL_CONNECT_REDIRECT_DELAY_MS);
+	if (resolveOAuthConnectMode(config.oauthConnectMode !== void 0 ? { oauthConnectMode: config.oauthConnectMode } : {}) === "popup") {
+		await waitForHubSpotOAuthPopup({
+			context,
+			authorizationUrl
+		});
+		return;
+	}
+	window.location.href = authorizationUrl;
+}
+//#endregion
+//#region src/browser/app-connect-controller/default-session-storage.ts
+/**
+* Builds a `SessionStorage` adapter that delegates to the global
+* `sessionStorage` object exposed by browsers. The controller uses
+* this when no custom storage is supplied (e.g. for tests or non-DOM
+* environments).
+*/
+function createDefaultSessionStorage() {
+	return {
+		setItem: (key, value) => {
+			sessionStorage.setItem(key, value);
+		},
+		getItem: (key) => {
+			return sessionStorage.getItem(key);
+		},
+		removeItem: (key) => {
+			sessionStorage.removeItem(key);
+		}
+	};
+}
+//#endregion
 //#region src/browser/app-connect-controller/disconnect.ts
 /**
 * Disconnect flow:
@@ -174,8 +346,8 @@ function isClientSessionActive(context) {
 * 1. Calls the SDK's `auth/logout` route to revoke the upstream token
 *    and clear the refresh-token cookie.
 * 2. Clears the local session-storage `expiresAt` entry.
-* 3. Updates the controller state to `disconnected` and navigates the
-*    browser to the URL the server returned in `redirect_to`.
+* 3. Updates the controller state to `disconnected` so the UI re-renders
+*    without a page reload.
 *
 * Errors are caught, logged, and surfaced via the controller's
 * `error` field so the UI can show a retry state.
@@ -195,14 +367,13 @@ async function disconnectFromHubSpot(context) {
 			credentials: "include"
 		});
 		if (!response.ok) throw new Error(`Logout failed: ${response.status}`);
-		const { redirect_to: redirectTo } = await response.json();
+		await response.body?.cancel();
 		store.setState({
 			expiresAt: null,
 			isSessionConnected: false,
 			isDisconnectInFlight: false
 		});
-		window.location.href = redirectTo;
-		logger.info("disconnectFromHubSpot: redirecting");
+		logger.info("disconnectFromHubSpot: complete");
 	} catch (err) {
 		const message = err instanceof Error ? err.message : "Disconnect failed";
 		logger.error("disconnectFromHubSpot: failed", err);
@@ -215,25 +386,45 @@ async function disconnectFromHubSpot(context) {
 //#endregion
 //#region src/browser/app-connect-controller/init.ts
 /**
-* Picks up the `__hs_expires_at` parameter the OAuth callback adds to
-* the redirect URL, persists it to the controller, and strips it from
-* the address bar so it's not logged or bookmarked.
+* On `controller.start()`:
+*
+* 1. If the browser has been redirected back to the SDK's frontend
+*    OAuth callback path (`/__hubspot_oauth_callback`) with `?code` +
+*    `?state`:
+*    - **Redirect flow** (no `window.opener`): POST to `auth/complete`
+*      from this window, persist `expires_at`, and `history.replaceState`
+*      to `return_path`.
+*    - **Popup flow** (`window.opener` present): relay `code` + `state`
+*      to the opener via `postMessage` and close. The opener POSTs to
+*      `auth/complete` so partitioned cookies match `init-session`.
+* 2. Pick up `?__hs_expires_at` from `window.location` (refresh hop),
+*    persist it, and strip it from the address bar.
 *
-* Called once by `controller.start()`. A no-op when the parameter
-* isn't present (e.g. on every page load other than the OAuth return
-* trip).
+* A no-op when neither set of parameters is present.
 */
 async function initAppConnect(context) {
+	await consumeOAuthCallback(context);
+}
+async function consumeOAuthCallback(context) {
+	if (window.location.pathname !== "/__hubspot_oauth_callback") return;
 	const params = new URLSearchParams(window.location.search);
-	const expiresAtStr = params.get(EXPIRES_AT_URL_PARAM);
-	if (!expiresAtStr) return;
-	const expiresAt = parseInt(expiresAtStr, 10);
-	if (isNaN(expiresAt)) return;
-	params.delete(EXPIRES_AT_URL_PARAM);
-	const cleanSearch = params.toString();
-	history.replaceState(null, "", cleanSearch ? `${window.location.pathname}?${cleanSearch}` : window.location.pathname);
-	context.store.setState({ expiresAt });
-	context.sessionStorage.setItem(EXPIRES_AT_KEY, String(expiresAt));
+	const code = params.get(AUTH_COMPLETE_CODE_PARAM);
+	const state = params.get(AUTH_COMPLETE_STATE_PARAM);
+	if (!code || !state) return;
+	if (isOAuthPopupCallback() && relayOAuthCallbackToOpener({
+		code,
+		state
+	})) return;
+	const { expires_at: expiresAt, return_path: returnPath } = await completeHubSpotOAuthSession(context, {
+		code,
+		state
+	});
+	storeExpiresAt({
+		context,
+		expiresAtMs: expiresAt
+	});
+	const targetUrl = new URL(returnPath, window.location.origin);
+	history.replaceState(null, "", `${targetUrl.pathname}${targetUrl.search}${targetUrl.hash}`);
 }
 //#endregion
 //#region src/browser/app-connect-controller/refresh.ts
@@ -514,4 +705,4 @@ function createAppConnectController(options) {
 //#endregion
 export { createLogger as n, createAppConnectController as t };
 
-//# sourceMappingURL=create-vctOhpX9.js.map
+//# sourceMappingURL=create-BNQazCF-.js.map